您的位置：首页 > Web前端 > JQuery

关注电子商务网站开发-《简单易用的JQUERY插件--图片延时加载插件(lazyload)》

2013-04-24 08:46 816 查看
图片延时加载(lazyload)是网站常用的一种手段，目的是为了减少页面加载时向服务器的请求数，这里分享一款支持大部分情况下（如IPAD浏览、异步加载、某个范围加载）的图片延时加载插件。

[b]代码及效果[/b]

先贴代码：



$.extend({
imgLoad: function (options) {
options = $.extend({
container: "img",//集合
time: 600,//滚动时定时刷新时间
attribute: "src2" //保存原图地址的自定义属性
}, options);
var container = options.container, n = n || 0, tim, _time = 0;
Load();
function GetHeight() {
var d = document,
y = (navigator.userAgent.toLowerCase().match(/iPad/i) == "ipad") ? window.pageYOffset : Math.max(d.documentElement.scrollTop, d.body.scrollTop);
return d.documentElement.clientHeight + y - n;
}
function Load() {
var hg = GetHeight();
$(container).each(function () {
var _s2 = $(this).attr(options.attribute), t = $(this).offset().top;
if (_s2 && t < hg && t > hg - 1000) {
$(this).attr("src", _s2).removeAttr(options.attribute)
};
})
};
if (!!window.ActiveXObject && !window.XMLHttpRequest)
{ _time = options.time }
$(window).scroll(function () {
clearTimeout(tim);
tim = setTimeout(function () { Load(); }, options.time);
});
}
})




点击这里查看效果

参数说明

参数container：container表示要遍历的容器，默认是IMG，也就是遍历整个页面的所有IMG。如果想只延时加载某个范围内的图片，可以修改此参数，如我想异步加载面代码中ul中的图片，那么只需要设置参数container的值为".imgContainer li img"即可。



<Script type="javascript/text">
$(function(){
$.imgLoad({ container: ".imgContainer li img"});
})
</Script>
<ul class="imgContainer">
<li>
<img src2="X1.JPG" />
</li>
<li>
<img src2="X2.JPG" />
</li>
<li>
<img src2="X3.JPG" />
</li>

</ul>




参数time：参数time表示延时加载的时间，默认是600毫秒，就是说当页面滚动到该范围时0.6秒后该图片就会显示，设置time为1秒：

<Script type="javascript/text">
$(function(){
$.imgLoad({"time":1000 });
})
</Script>


参数attribute：此参数为存储图片路径的参数，在图片设置SRC属性之前，要把真实的图片路径存在某个属性里，默认为SRC2，可以把此属性设置为任意：



<Script type="javascript/text">
$(function(){
$.imgLoad({ attribute: "myAttr"});
})
</Script>
<body>
<img myAttr="1.jpg"/>
</body>




基本参数已经讲完了，关于调用也是相当简单的。这里还有一个问题，由于延时加载的方法是写在页面滚动的事件里，也就是代码中的

$(window).scroll(function () {
clearTimeout(tim);
tim = setTimeout(function () { Load(); }, options.time);
});


那么如果直接刷新页面浏览器会直接跳到当前停留的位置，但是有的浏览器没有触发scroll事件，这种情况下的解决办法在页面加载完成后使用scrollTop方法，让浏览器向上1个像素：

jQuery(window).scrollTop(1)


这样这个插件就讲完了，相对于网上的一些插件应该算是简单实用的了，欢迎大家踊跃讨论。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航