js图片懒加载

<script type="text/javascript">
var lazyLoad = {
    // 获取元素到页面顶部的距离
    getoffsetTop: function(elem){
        var offTop = 0;
        while(elem != null){
            offTop += elem.offsetTop;   // 获取元素到其上一级元素顶部的距离
            elem = elem.offsetParent;   // 元素的上一级元素
        }
        return offTop;
    },
    // 判断是否加载图片
    isLoad: function(elem){
        //可视窗口的高度
        var cHeight = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight, //可视窗口的高度
            sX = window.pageXOffset || document.body.scrollTop || document.documentElement.scrollTop, //浏览器可视窗口距离页面顶部的距离
            threshold = -110, //表示图片在什么时候进行加载，默认为 0 表示当图片进入可视区域立即加载；设为正数表示图片距离 threshold像素进入可视区域进行加载；设为负数表示图片进入可视区域threshold像素时进行加载。
            oTop = this.getoffsetTop(elem), //元素到页面顶部的距离
            viewHeight = oTop - sX - threshold; //元素到浏览器窗口顶部的距离

        //图片进入浏览器可视区域，加载图片
        if(cHeight >= viewHeight){
            return true;
        }else{
            return false;
        }
    },
    //加载图片。isFadein:true时，图片使用淡入动画效果加载
    loadImg: function(elems, isFadein){
        for(var i = 0, len = elems.length; i < len; i++){
            if (this.isLoad(elems[i])) {
                //已经加载过的图片，下次判断那些图片该加载时，直接跳过
                if (elems[i].className !== "loaded") {
                    //针对使用data-自定义的属性，要使用getAttribute()获取值
                    elems[i].src = elems[i].getAttribute("data-src");
                    elems[i].className = "loaded";
                    if(isFadein){
                        this.fadeIn(elems[i]);   //淡入效果显示图片，有点闪烁？？
                    }
                }
            }else {
                return; //下一个图片没有进入加载区域，就不在循环
            }
        }
    },

    //使用淡入动画效果加载图片
    fadeIn: function(elem) {
        var n = 0,
            isnotIE = window.XMLHttpRequest ? true : false;
        if (isnotIE) {
            elem.style.opacity = 0;
        } else {
            elem.style.filter = "alpha(opacity=0)";
        }
        var t = setInterval(function() {
            if (n < 100) {
                n += 5;
                if (isnotIE) {
                    elem.style.opacity = n / 100;
                } else {
                    elem.style.filter = "alpha(opacity=" + n + ")";
                }
            } else {
                clearInterval(t);
                 
            }
        }, 1000/60);
    }
}


window.onscroll = function() { //滚动时根据需要加载图片，加载图片的动画效果为淡入，设置第二个参数为true
    lazyLoad.loadImg(document.getElementsByTagName("img"), true);
};
window.onload = function() { //页面加载后，可视区域的图片显示为实际图片
    lazyLoad.loadImg(document.getElementsByTagName("img"), true);
};
// console.log(lazyLog.getoffsetTop($(".data_list a")[0]));
</script>
<script>
// $(window).scroll(function() {//窗口滚动的时候（鼠标滚轮的时候。。）
//   $('img').each(function() {//把以下的方法作用到每一个img标签，可自行加限定条件
//     var $imgSrc = $(this).attr('data-src');//获取每张图片对应地址
//     var $imgTop = $(this).offset().top;//获取每张图片对应距离document顶部的高度
//     var scrollT = $(window).scrollTop();//获取滚轮滚动的距离
//     var halfDoc = $(window).height();//获取浏览器窗口可视高度
//     var ifElse = (scrollT+halfDoc)>=$imgTop;//如果滚动距离加上窗口可视高度大于该图片距离document顶部的高度
//     var _this=this;//保存this的作用域以便于在其它作用域上使用这个作用域
//     if(ifElse){//如果条件成立
//       setTimeout(function(){$(_this).attr('src',$imgSrc);},10);//把图片的src地址改成data-src的值（前面已经获取了）
//     }
//   })//end object 'img'
// })//end object window
</script>

<script>
/**
 * @author beidan
 * @description 图片懒加载
 */
;(function () {
    /*
     * 函数功能：函数节流
     * fn  需要调用的函数
     * delay  函数需要延迟处理的时间
     * mustRunDelay  超过该时间，函数一定会执行
     * */
    var throttle = function (fn, delay, mustRunDelay) {
        var timer;  //使用闭包存储timer
        var t_start;
        //闭包返回的函数
        return function (val) {
            var args = arguments, t_curr = +new Date();  //使用+new Date() 将字符串转换成数字
            clearTimeout(timer);
            if (!t_start) {  // 使用!t_start 如果t_start=undefined或者null 则为true
                t_start = t_curr;
            }
            if (t_curr - t_start >= mustRunDelay) {
                fn.apply(null, args);
                t_start = t_curr;
            } else {
                timer = setTimeout(function () {
                    fn.apply(null, args);
                }, delay);
            }
        }
    };

    function LazyLoad() {
    }

    var download_count = 0,
        ele_obj = [];

    LazyLoad.prototype = {
        //放一些初始化的方法
        init: function () {
            this.initElementMap();
            this.lazy();
            this.throttleLoad();
        },
        getPosition: {
            /*
             获取屏幕可视窗口大小
             document.documentElement.clientHeight    IE/CH支持
             document.body.client    低版本混杂模式
             获取当前元素相对于窗口顶部的距离
             element.offsetTop
             滚动条滚动的距离
             document.documentElement.scrollTop   兼容ie低版本的标准模式
             document.body.scrollTop 兼容混杂模式；
             */
            Viewport: function () {
                if (document.compatMode == "BackCompat") {
                    //此时浏览器客户区宽度是document.body.clientWidth；
                    var Height = document.body.clientHeight;
                } else {
                    //浏览器客户区宽度是document.documentElement.clientWidth。
                    var Height = document.documentElement.clientHeight;
                }
                return Height;
            },
            ScrollTop: function () {
                if (document.compatMode == "BackCompat") {
                    var elementScrollTop = document.body.scrollTop;

                } else {
                    var elementScrollTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;

                }
                return elementScrollTop;
            },
            ElementViewTop: function (ele) {
                if (ele) {
                    var actualTop = ele.offsetTop;
                    var current = ele.offsetParent;
                    while (current !== null) {
                        actualTop += current.offsetTop;
                        current = current.offsetParent;
                    }
                    return actualTop - this.ScrollTop();
                }
            }
        },
        //从所有相关元素中找出有lazy_src属性的元素
        initElementMap: function () {
            var el = document.getElementsByTagName('img');
            for (var j = 0, len2 = el.length; j < len2; j++) {
                //查找有lazy_src标签的img
                if (typeof (el[j].getAttribute("lazy_src"))) {
                    ele_obj.push(el[j]);
                    download_count++;
                }
            }
        },
        //防止多次加载
        lazy: function () {
            if (!download_count) return;
            var innerHeight = LazyLoad.prototype.getPosition.Viewport();
            for (var i = 0, len = ele_obj.length; i < len; i++) {
                var t_index = LazyLoad.prototype.getPosition.ElementViewTop(ele_obj[i]); //得到图片相对document的距上距离
                if (t_index < innerHeight) {
                    ele_obj[i].src = ele_obj[i].getAttribute("lazy-src");
                    ele_obj[i].removeAttribute("lazy-src");
                    delete ele_obj[i];
                    download_count--;
                }
            }
        },
        /*使用函数节流优化性能*/
        throttleLoad: function () {
            var throttle1 = throttle(LazyLoad.prototype.lazy, 200, 500);
            window.onscroll = window.onload = function () {
                throttle1();
            }
        },
    };
    window.LazyLoad = LazyLoad;
})    
    
</script>