分屏显示图片(Jquery)

因项目需要，页面上需要按需加载图片，借鉴了一下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();
});