因项目需要,页面上需要按需加载图片,借鉴了一下jquery.lazy插件的实现方式,自己写了一个。
//分屏显示图片
function showImg() {
var Cur_WindowH = $(window).height(); //浏览器可见高度
var Cur_WindowW = $(window).width(); //浏览器可见宽
var Cur_scrollTop = $(document).scrollTop(); //滚动条相对于顶部位置
var Cur_scrollLeft = $(document).scrollLeft(); //滚动条相对于左边位置
var imgarr = $(".lazy[src='/scripts/lazyload/grey.gif']");
var curobj;
var offset;
var original;
var pobj;
var src;
for (var i = 0; i < imgarr.length; i++) {
curobj = imgarr.eq(i);
if (!curobj.is(":visible")) {
//如果当前元素是不可见的,则取其可见的父元素的位置
pobj = curobj.parent();
while (!pobj.is(":visible")) {
pobj = pobj.parent();
}
offset = pobj.offset();
}
else {
offset = curobj.offset();
}
original = curobj.attr("original");
src = curobj.attr("src");
if (offset.top <= Cur_WindowH) {
curobj.attr("src", original).fadeIn(1000);
}
else if (offset.top - Cur_scrollTop < Cur_WindowH) {
curobj.attr("src", original).fadeIn(1000);
}
else {
continue;
}
}
}
使用说明:需要引入jquery.js,本人用的是1.7.2,使用之前需要给img标签加上"original"属性,也可以根据需要自己命名一个属性,然后把上面代码中的original改成自己的属性名称即可,为了兼容各浏览器,可以给这些需要延迟加载的img的src指定一个1像素大小的图片,并将其style的display设置成none;当然,后面别忘了写window.scroll事件
$(window).scroll(function () {
showImg();
});