jQuery延迟加载图像与限制?

时间:2011-12-14 18:39:09

标签: javascript jquery

我已经获得了一个商业会员相关网站的设计,其中主页上有2500多张图片。我正在考虑减轻图像加载的两个方向是利用一个懒惰的图像加载脚本。

我一直在搞乱jQuery JAIL(异步图像加载器)脚本。我已将其设置为在页面加载时加载所有可见图像。几秒钟后,它开始下载页面下方的所有其余图像。这通常像2400+图像。

问题在于,当浏览器被告知下载2400个图像时,它基本上会冻结,或者至少冻结滚动条直到它完成。

是否有任何jQuery图像加载脚本与JAIL类似但允许某种类型的限制?任何真正有助于冻结页面的东西。

我也在研究css精灵,但由于各种技术原因和时间限制,它可能不太可行。

2 个答案:

答案 0 :(得分:4)

使用此jQuery plugin。示例here  它延迟了长网页中图像的加载。视口外的图像(网页的可见部分)在用户滚动到它们之前不会被加载。

在包含许多大图像的长网页上使用Lazy Load可以加快页面加载速度。加载可见图像后,浏览器将处于就绪状态。在某些情况下,它还可以帮助减少服务器负载。

答案 1 :(得分:0)

如果图像很小,您可以考虑将它们组合成较少的大图像并一次加载它们,将它们全部显示为<div>元素及其背景图像集。例如:

http://jsfiddle.net/XXRwD/