我有一个页面，其中包含一个包含大约 100 个图像的列表，如果用户只查看大约 100 个图像，我不希望浏览器必须加载所有图像。 10 个。
所以我在我的页面上尝试了 jQuery.lazyload 插件。
如果我写：
$( function() {
$('.list li img').lazyload( { placeholder: 'n.gif' } );
});
代码：
<ul class="list">
<li><img src="myawesomeimage.jpg"></li>
</ul>
浏览器在延迟加载应用于图像之前加载图像。 我在没有文档就绪构造的情况下尝试了图像标签下方的延迟加载 - 结果相同
我通过一个 php 脚本代理了图像加载，该脚本记录了对图像的访问 - 它仍然在开始时加载所有内容......
有人有想法吗？
【问题讨论】：
标签： javascript jquery html image lazy-loading
您是在本地还是通过互联网连接进行测试。我唯一能想到的是，如果您在本地或本地网络上开发，图像加载速度会如此之快，以至于插件在加载之前不会执行。调试此问题的一种方法可能是使用 Firebug 网络选项卡。在延迟加载执行之前添加一个 $.ajax 调用到 nowhere important 然后查看网络选项卡以查看 AJAX 请求何时发出与图像加载时的比较。如果一切顺利，您将在图像请求之前看到 AJAX 请求。如果您没有看到任何图像请求，请确保您正在查看“全部”组。
此外，请确保在测试所有这些时禁用缓存，否则浏览器将立即从缓存中加载图像。
最后，我注意到插件创建者提到它在与 jQuery 1.3 配对时在 IE 中不起作用。你在什么浏览器上测试？
【讨论】：
我发现不同的浏览器有不同的行为。一些浏览器会预加载所有的图片，即使有延迟加载。
如果你能控制HTML的生成，那有绝对的解决办法。
像这样输出你的图片标签：
<img src=placeholder.png original=myimage.png>
换句话说 - 使 src 属性指向某个占位符图像（或完全省略它），并将原始属性指向您想要延迟加载的图像。
这将导致浏览器预加载占位符图像（最好只为所有 img 标签使用 1 个占位符），然后等待加载原始属性指向的图像。根据我的经验，这适用于所有浏览器。
【讨论】：
也许值得检查一个名为 JAIL http://www.sebastianoarmelibattana.com/projects/jail 的插件，它在相同的场景中运行良好，并且具有在所有浏览器中工作并使用 data-* 属性的优势。 H 你可以在http://blog.sebarmeli.com/2011/01/04/reasons-why-i-wrote-the-plugin-jquery-asynchronous-image-loader-jail/阅读更多关于它的信息，你可以在Github找到源代码
【讨论】：