延时加载图片

制作原理：

1.把正确地址保存至自定义属性中当需要时直接调用替换

2.对象距离页面顶部的长度和滚动条加上页面实际显示高度进行判断。知道对象是否已经显示到浏览器可视区域中

3.使用setTimeout进行延时

用到的几个兼容方法

//获取滚动条高度
function getScroll(){
    return {
        top:document.body.scrollTop || document.documentElement.scrollTop,
        left:document.body.scrollLeft || document.documentElement.scrollLeft
    }
}

//获取浏览器的可视区高度与宽度
function getInner(){
    if(typeof window.innerWidth != 'undefined'){
        //支持现代浏览器
        return {
            window.innerWidth,
            height:window.innerHeight
        }
    }else{
        //支持ie6等低版本浏览器
        return {
            document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
        }
    }
}

//获取对象到顶部的距离
function offsetTop(element){
    var top = element.offsetTop;
    var parent = element.offsetParent;
    while(parent!=null){
        top += parent.offsetTop;
        parent = parent.offsetParent;
    }
    return top;
}

//获取属性
function attr(obj,attr,val){
    if(arguments.length == 3){
        obj.setAttribute(attr,val);
    }else{
        return obj.getAttribute(attr);
    }
};

var oImg = document.getElementByTagName('img');
window.onscroll = function(){
    setTimeout(function(){
        var windowTop = getScroll().top+getInner().height;
        for(var i=0;i<oImg.length;i++){
            var oTop = offsetTop(oImg[i]);
            if(windowTop>oTop){
                attr(oImg[i],'src',oImg[i].attr('xsrc'));
            }
        };
    },1000);
}

    <li><img xsrc="1.jpg" src="opacity.gif" alt=""/></li>