Web延迟图像无法加载

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将解析路径并生成相对于应用程序基本网址的网址：/app_path/images/img.png。

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

总而言之，您需要使用WebForms中的方法ResolveUrl或MVC中的Url.Content删除~。