Question

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

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

我认为我真正需要做的事情并不是真的吐出图像而是伪造的元素，例如跨度，并且可能修改我的代码，这样如果用户查看跨度，则将其渲染为图像元素。

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

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

我很欣赏任何例子或想法。

相关链接/查找可能有助于解决此问题：

＃1 ：http://github.com/silentmatt/jquery_lazyload

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

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

更新

＃1 ：我们决定创建一个脚本来生成缩略图并对它们进行递归生成。我实现了它们。 570个缩略图图像中的每一个都是60-120KB，而现在它们只有2 KB。由于570个并发请求，加载速度稍快但仍然很慢，即使延迟加载器插件到位，我也不确定它是否足够快地应用（即使在图像完全加载之前就准备好了DOM）。虽然取得了一些进展。

我正在考虑在前10个单元之后生成1x1像素的GIF并且只是延迟加载它们。仍然需要研究一种技术。

Answer 1

Web浏览器非常聪明地有效地渲染页面，所以试试这个：

确保您在HTML中发送图像的像素大小，以便即使未加载图像，浏览器也可以呈现整个页面。
立即（在服务器上）填写最重要图像的URL，以便浏览器尽快加载图像。对于所有其他图像，请使用占位符，其中显示“图像正在加载......”或类似内容。
在页面加载时，将占位符替换为背景中的真实图像（加载2-3张图像，然后再次使用计时器等待，例如50ms）。

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

Answer 2

或许这样的事情：

<img lateSrc="/some/image.gif" />

<script>
$(document).ready(function() { 
    $('img[lateSrc]').each(function() { 
        var t = $(this);
        t.attr('src', t.attr('lateSrc')).removeAttr('lateSrc');
    });
});
</script>

Answer 3

图像有多大？另一种方法可能是将它们下载为一个大的平铺图像，然后使用css sprites或类似的东西将其删除。

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

3 个答案: