图片延时加载(lazyload)是网站常用的一种手段&＃xff0c;目的是为了减少页面加载时向服务器的请求数&＃xff0c;这里分享一款支持大部分情况下&＃xff08;如IPAD浏览、异步加载、某个范围加载&＃xff09;的图片延时加载插件。
代码及效果
先贴代码&＃xff1a;
$.extend({imgLoad: function (options) {options &＃61; $.extend({container: "img",//集合time: 600,//滚动时定时刷新时间attribute: "src2" //保存原图地址的自定义属性
}, options);var container &＃61; options.container, n &＃61; n || 0, tim, _time &＃61; 0;Load();function GetHeight() {var d &＃61; document,y &＃61; (navigator.userAgent.toLowerCase().match(/iPad/i) &＃61;&＃61; "ipad") ? window.pageYOffset : Math.max(d.documentElement.scrollTop, d.body.scrollTop);return d.documentElement.clientHeight &＃43; y - n;}function Load() {var hg &＃61; GetHeight();$(container).each(function () {var _s2 &＃61; $(this).attr(options.attribute), t &＃61; $(this).offset().top;if (_s2 && t
点击这里查看效果
参数说明
参数container&＃xff1a;container表示要遍历的容器&＃xff0c;默认是IMG&＃xff0c;也就是遍历整个页面的所有IMG。如果想只延时加载某个范围内的图片&＃xff0c;可以修改此参数&＃xff0c;如我想异步加载面代码中ul中的图片&＃xff0c;那么只需要设置参数container的值为".imgContainer li img"即可。
<Script type&＃61;"Javascript/text">$(function(){$.imgLoad({ container: ".imgContainer li img"});})
Script>
<ul class&＃61;"imgContainer"><li><img src2&＃61;"X1.JPG" />li><li><img src2&＃61;"X2.JPG" />li><li><img src2&＃61;"X3.JPG" />li>ul>
参数time&＃xff1a;参数time表示延时加载的时间&＃xff0c;默认是600毫秒&＃xff0c;就是说当页面滚动到该范围时0.6秒后该图片就会显示&＃xff0c;设置time为1秒&＃xff1a;
<Script type&＃61;"Javascript/text">
$(function(){$.imgLoad({"time":1000 });
})
Script>
参数attribute&＃xff1a;此参数为存储图片路径的参数&＃xff0c;在图片设置SRC属性之前&＃xff0c;要把真实的图片路径存在某个属性里&＃xff0c;默认为SRC2&＃xff0c;可以把此属性设置为任意&＃xff1a;
<Script type&＃61;"Javascript/text">$(function(){$.imgLoad({ attribute: "myAttr"});})
Script>
<body><img myAttr&＃61;"1.jpg"/>
body>
基本参数已经讲完了&＃xff0c;关于调用也是相当简单的。这里还有一个问题&＃xff0c;由于延时加载的方法是写在页面滚动的事件里&＃xff0c;也就是代码中的
$(window).scroll(function () {clearTimeout(tim);tim &＃61; setTimeout(function () { Load(); }, options.time);});
那么如果直接刷新页面浏览器会直接跳到当前停留的位置&＃xff0c;但是有的浏览器没有触发scroll事件&＃xff0c;这种情况下的解决办法在页面加载完成后使用scrollTop方法&＃xff0c;让浏览器向上1个像素&＃xff1a;
jQuery(window).scrollTop(1)
这样这个插件就讲完了&＃xff0c;相对于网上的一些插件应该算是简单实用的了&＃xff0c;欢迎大家踊跃讨论。
京公网安备 11010802041100号