如何在包含500多张图像的页面上实现延迟加载？
我基本上有一个预订引擎单位结果页面， 必须显示40个单位，每个单位有1个大图像的第一个缩略图和X个随附的缩略图图像。
我一直在使用jquery延迟加载插件，但它不够彻底（我在DOM Ready上调用它），而且它在IE中不起作用（50％的客户端使用IE因此这是一个大问题） 。
我认为我真正需要做的并不是真的吐出图像而是伪造的元素，例如跨度，并且可能修改我的代码，这样如果用户查看跨度，则将其渲染为图像元素。
预订引擎依赖于JS，所以我想我可能只是依赖于ajaxifying所有缩略图并在窗口滚动等事件处理程序，以使页面“可用”并平均加载（2-3在高速DSL /电缆上使用秒而不是5到30秒。
我很欣赏任何例子或想法。
相关链接/发现可能有助于解决此问题：
＃1 ： http ： //github.com/silentmatt/jquery_lazyload
jquery延迟加载的一个分支似乎解决了IE加载并增加了对容器的支持。
＃2 ：youtube.com将一些video的src设置为1×1透明gif和延迟加载后大约前10个结果左右。
更新
＃1 ：我们决定制作一个脚本来生成缩略图并对它们进行递归生成。 我实现了它们。 570个缩略图图像中的每一个都是60-120KB，而现在它们只有2 KB。 由于570个并发请求，加载速度稍快但仍然很慢，即使延迟加载器插件到位，我也不确定它是否足够快地应用（即使在图像完全加载之前就准备好了DOM）。 虽然取得了一些进展。
我想在前10个单元之后生成1×1像素的GIF并且只是延迟加载它们。 仍然需要研究一种技术。
Web浏览器非常聪明地有效地渲染页面，所以试试这个：
-
确保在HTML中发送图像的像素大小，以便即使未加载图像，浏览器也可以呈现整个页面。
-
立即填写最重要图像的URL（在服务器上），以便浏览器尽快加载图像。 对于所有其他图像，请使用占位符，其中显示“图像正在加载…”或类似的内容。
-
在页面加载时，将占位符替换为背景中的真实图像（加载2-3张图像，然后再次使用计时器等待，例如50ms）。
您可以通过查询浏览器窗口的大小来进一步优化步骤＃3，然后询问图像的位置，只有在可见时才加载它们。
也许这样的事情：
![]()
图像有多大？ 另一种方法可能是将它们下载为一个大的平铺图像，然后用css sprites或类似的东西将其砍掉。