网络延迟图像无法加载

Question

我是网络开发的新手，我在使我的网络快速加载方面遇到了困难。

所以我 found this article 并且实现了它。当可视化我的页面时，我发现图像根本没有呈现。我得到以下图像：

图片html

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="~/images/menunavegacion.png" />

脚本

<script>
    function init() {
        var imgDefer = document.getElementsByTagName('img');
        for (var i = 0; i < imgDefer.length; i++) {
            if (imgDefer[i].getAttribute('data-src')) {
                imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
            }
        }
    }
    window.onload = init;
</script>

调试信息

此外，我用 chrome 调试它，它似乎正确地切换了真实图像和假图像。但是网络没有加载正确的。

我错过了什么？

感谢您的帮助

Answer 1

当你将src属性中的图片路径设置为~/images/img.png时，asp.net会解析该路径并生成一个url相对于应用程序基url: /app_path/images/img.png.

然而，属性 data-src 的值未被处理，看起来像 ~/images/img.png（仍以 ~ 为前缀）。当你用data-src的值替换src的值时，浏览器将图像的路径解析为http://sample.com/~/images/img.png。您的服务器上可能不存在此路径，您会收到错误 404。

综上所述，您需要使用MVC中的方法ResolveUrl in WebForms or Url.Content删除~。