如何在包含 500+ 张图片的页面上实现延迟加载？

我基本上有一个预订引擎单位结果页面must显示 40 个单元，每个单元有 1 个大图像的第一个缩略图和 X 个伴随的缩略图。

我一直在使用 jquery 延迟加载插件，但它不够彻底（我在 DOM Ready 上调用它），而且它在 IE 中不起作用（50% 的客户端使用 IE，所以这是一个大问题） 。

我认为我真正需要做的并不是真正吐出图像，而是一个假元素，例如跨度，并可能修改我的代码，以便如果用户查看跨度，将其渲染到图像元素中。

<span src="/images/foo.gif">

预订引擎依赖于 JS，所以我想我可能被迫只依赖 ajax 化所有缩略图并在窗口滚动上设置事件处理程序等，以便页面“可用”并平均加载（ 2-3秒而不是高速 DSL/电缆上的 5-30 秒）。

我很感激任何例子或想法。

可能对解决此问题有用的相关链接/发现：

#1: http://github.com/silentmatt/jquery_lazyload http://github.com/silentmatt/jquery_lazyload

jquery 延迟加载的一个分支，似乎解决了 IE 加载问题并添加了对容器的支持。

#2：youtube.com 将某些视频的 src 设置为 1x1 透明 gif，并在大约前 10 个结果后延迟加载。

Updates

#1：我们决定制作一个脚本来生成缩略图并递归生成它们。我实施了它们。 570 个缩略图不再是每张 60-120KB，而是每张 2 KB。加载速度有点快，但仍然很慢，因为有 570 个并发请求，即使惰性加载器插件已就位，我也不确定它的应用速度是否足够快（即使在图像完全加载之前在 DOM 上准备好）。虽然取得了一些进展。

我正在考虑在前 10 个单元之后生成 1x1 像素的 gif，然后延迟加载它们。不过还是得摸索出一套技术。

Web 浏览器在高效渲染页面方面非常智能，因此请尝试以下操作：

1. 确保在 HTML 中发送图像的像素大小，以便即使图像尚未加载，浏览器也可以呈现整个页面。

2. 立即（在服务器上）填写最重要图像的 URL，以便浏览器尽快加载图像。对于所有其他图像，请使用一个占位符，其中显示“图像正在加载...”或类似内容。

3. 页面加载时，将占位符替换为背景中的真实图像（加载 2-3 个图像，然后再次运行自己，并等待计时器，例如 50 毫秒）。

您可以通过查询浏览器窗口的大小来进一步优化步骤#3，然后询问图像的位置，并且仅在图像可见时才加载它们。