JS延迟加载

我们做一个对图片的延迟加载，需要准备：一张通用的默认图片，还有几张正常使用的图片。

表现形式：

当浏览器没有滚动到可以显示这个图片的高度时，默认使用默认图片，这个图片一般几kb的大小，当浏览器滑动到可以显示图片的高度时，开始加载对应的图片，由透明到不透明做一个过渡，这个也是京东商城使用的一个效果。

所有图片都有一个通用的class名称：.wait_load 用一个id为：#photo的div容器包裹。

图片元素src默认使用默认的图片加载，并且会有一个自定义的属性，这个属性自定义名称，这里使用xsrc，其属性值要是正确的图片链接地址！

<img xsrc="images/p1.jpg"  src="images/ph_login1.jpg" alt="" class="wait_load" />

首先我们获取到所有图片元素的集合：

var img_elements = $('#photo .wait_load');

然后设置滚动事件，触发显示图片的效果。

$(window).bind('scroll',function(){
    setTimeout(function(){
        for(var i = 0;i<img_elements.length();i++){
            var _this = img_elements.getElemet(i);
            if(getInner().height + getScroll().height >= offsetTop(_this)) {
                $(_this).attr('src',$(_this).attr('xsrc'));
            }
        }
    },100)
})

当浏览器滚动，触发延迟加载setTimeout，然后for循环所有图片元素，判断当前的高度是否大于或者等于图片距离顶部高度，如果大于或者等于，那么这个图片的src将改为xsrc中的正确图片链接。

此时延迟加载基本完成，但是还没有过渡效果，于是我们要再添加一个透明度

//在触发之前将所有的图片透明度改为0；
$('#photo .wait_load').opacity(0);

$(window).bind('scroll',function(){
    setTimeout(function(){
        for(var i = 0;i<img_elements.length();i++){
            var _this = img_elements.getElemet(i);
            if(getInner().height + getScroll().height >= offsetTop(_this)) {
                $(_this).attr('src',$(_this).attr('xsrc')).animation({
                'attr' : 'o',
                'end' : 100
                });
            }
        }
    },100)
})

所有图片透明度为0后，调用动画效果，将透明度改为正常值。

考虑到当浏览器大小发生变化是，可是区域大小也会发生变化，所以也要为窗口大小做一个事件触发，但是触发的代码都是一样的，只是事件不同，这里就可以做一个节省代码的操作。

//在触发之前将所有的图片透明度改为0；
$('#photo .wait_load').opacity(0);

//触发事件
$(window).bind('scroll',_wait_load);
$(window).bind('resize',_wait_load);

//共用代码
function _wait_load() {
   setTimeout(function(){
        for(var i = 0;i<img_elements.length();i++){
            var _this = img_elements.getElemet(i);
            if(getInner().height + getScroll().height >= offsetTop(_this)) {
                $(_this).attr('src',$(_this).attr('xsrc')).animation({
                'attr' : 'o',
                'end' : 100
                });
            }
        }
    },100)
};

上面用的一些关联代码：

//获取元素到最外层顶点的距离
function offsetTop(element) {
    var top = element.offsetTop;
    var parent = element.offsetParent;
    while(parent != null) {
        top += parent.offsetTop;
         parent = parent.offsetParent;
    }
    return top;
}


//跨浏览器获取可视宽度 
function getInner() {
    if(typeof innerWidth != 'undefined') {
        return {
            width : window.innerWidth,
            height : window.innerHeight
        }
    }else {
        return {
            width : document.documentElement.clientWidth,
            height : document.documentElement.clientHeight
        }
    }
}

//跨浏览器获取scroll大小
function getScroll() {
    return {
        width : document.body.scrollLeft != 0 ? document.body.scrollLeft : document.documentElement.scrollLeft,
        height : document.body.scrollTop != 0 ? document.body.scrollTop : document.documentElement.scrollTop
    }
};


//获取某一节点的属性
Base.prototype.attr = function(attr,value) {
    for(var i = 0;i<this.arr.length;i++){
        if(arguments.length == 1) {
            return this.arr[i].getAttribute(attr);
        }else if(arguments.length == 2) {
            this.arr[i].setAttribute(attr,value);
        }
    }
    return this;
}

以上完成，这里放一下效果图：