我有一个包含大约100张图片的列表的页面，如果用户只查看大约，我不希望浏览器必须加载所有图片。其中10个。
所以我在我的页面上尝试过jQuery.lazyload插件。
如果我写：
$( function() {
$('.list li img').lazyload( { placeholder: 'n.gif' } );
});
代码：
<ul class="list">
<li><img src="myawesomeimage.jpg"></li>
</ul>
浏览器在将lazyload应用于图像之前加载图像。 我在图像标签下面尝试了lazyload而没有文档就绪的结构 - 相同的结果
我通过记录对图像的访问权限的PHP脚本代理图像加载 - 它仍然在开始时加载所有内容......
有人有想法吗？
答案 0 :(得分：4)
您是在本地还是通过互联网连接进行测试。我唯一能想到的是，如果您在本地或本地网络上进行开发，图像的加载速度会非常快，以至于插件在加载之后才会执行。调试此方法的一种方法可能是使用Firebug网络选项卡。在执行延迟加载之前，将$ .ajax调用添加到无处不重的位置，然后检查网络选项卡以查看AJAX请求何时与加载图像时相比。如果一切顺利，您将在图像请求之前看到的AJAX请求。如果您没有看到任何图像请求，请确保您正在查看“全部”组。
此外，请确保在测试所有这些内容时禁用缓存，否则浏览器将立即从缓存中加载图像。
最后，我注意到插件创建者提到它在与jQuery 1.3配对时在IE中不起作用。您正在测试哪种浏览器？
答案 1 :(得分：4)
我发现不同的浏览器有不同的行为。有些浏览器会预先加载所有图像，即使使用了lazyload。
如果您可以控制HTML生成，那么就有一个绝对的解决方案。
像这样输出你的图像标签：
<img src=placeholder.png original=myimage.png>
换句话说 - 使src属性指向某个占位符图像（或完全省略它），并将原始属性指向您想要延迟加载的图像。
这将导致浏览器预加载占位符图像（最好只为所有img标记使用1个占位符），然后等待加载原始属性指向的图像。根据我的经验，这适用于所有浏览器。
答案 2 :(得分：0)
查看一个名为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
上找到源代码