JS 懒加载实现

一、懒加载代码

/**
 * Created by channng on 16/12/5.
 */
;(function($){

    var defaults = {
        coverColor:"#dfdfdf",
        coverDiv:"",
        showTime:300,
        offsetBottom:0,
        offsetTopm:50,
        onLoadBackEnd:function(index,dom){},
        onLoadBackStart:function(index,dom){}
    }

    //所有待load src
    var srcList = []

    var lazyLoadCoutn = 0;
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    var lazyImgList = $("img[data-lazy-src]");
    var default_base64_src ="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";

    //获取img
    function getImgNaturalDimensions(src, callback,lazyLoadCoutn) {
        var nWidth, nHeight

        var image = new Image()
        image.src = src;
        image.onload = function() {
            callback(image.width, image.height);
            defaults.onLoadBackStart(lazyLoadCoutn,$("img[data-lazy-src]:eq("+lazyLoadCoutn+")"));
        }
        return [nWidth, nHeight];
    }

    function showImg(lazyLoadCoutn,callback){

        var src =  lazyImgList.eq(lazyLoadCoutn).attr("data-lazy-src")
        getImgNaturalDimensions(src, function () {
            try {

            meng($("img[data-lazy-src]:eq("+lazyLoadCoutn+")") ,lazyLoadCoutn,callback)
                }catch(error) {

                }
        },lazyLoadCoutn)
    }

    function meng(jDom,lazyLoadCoutn,callback){
        if(jDom.attr("data-comp")){
            return;
        }
        jDom.css("visibility","hidden");
        jDom.attr("src",jDom.attr("data-lazy-src"))
        var w = jDom.width();
        var h = jDom.height();
        var offsetTop = jDom.offset().top;
        var offsetLeft = jDom.offset().left;

        jDom.css("visibility","visible");
        $("body").append("<div class='meng-lazy-div"+lazyLoadCoutn+"' style='background-color: "+defaults.coverColor+";position:absolute;width:"+w+"px;height:"+h+"px;top:"+offsetTop+"px;left:"+offsetLeft+"px;z-index:500'>"+defaults.coverDiv+"</div>");
        noneM(lazyLoadCoutn,callback,jDom);
        jDom.attr("data-comp","true");
    }

    function noneM(lazyLoadCoutn,callback,jDom){
        if(true){
            $(".meng-lazy-div"+lazyLoadCoutn).animate({opacity:"0"},defaults.showTime,function(){
               $(this).remove();
                defaults.onLoadBackEnd(lazyLoadCoutn,jDom)
                callback();
            });
        }
    }

    function checkOffset(){
        var scrollTop = $(document).scrollTop();
        var onlazyList = [];
        lazyImgList.each(function(index){
            var dom = $(this);
            if(!dom.attr("data-comp")){
                if(dom.offset().top-scrollTop+defaults.offsetTopm>=0&&dom.offset().top-scrollTop<(windowHeight+defaults.offsetBottom)){
                    onlazyList.push(index);
                }
            }
        })

        if(onlazyList.length!=0){
            showImg(onlazyList[0],function(){
                checkOffset();
            });
        }
    }

    function range(){
        checkOffset();

    }

    function init(setting){
        defaults = $.extend(defaults,setting);

        lazyImgList.each(function(){
            var sr = $(this).attr("data-lazy-src");
            srcList.push(sr);

            $(this).attr("src",default_base64_src);
        });
        range();
        window.onscroll=function(){
            range()
        }
    }

    window.lazyLoadInit = init;


})($)

二、使用方法

1.通过ctrl+h将文档中所有的src更换为data-lazy-src

<img src=
<img data-lazy-src=

2.在body标签的最后加入懒加载插件

        <script src="./dist/EasyLazyload.min.js"></script>

3.调用懒加载插件

<script>
    lazyLoadInit({
        coverColor:"white", // 一般不需要
        coverDiv:"<h1>test</h1>", // 一般不需要
        offsetBottom:0, // 一般不需要
        offsetTopm:0, // 一般不需要
        showTime:1100,
        onLoadBackEnd:function(i,e){
            console.log("onLoadBackEnd:"+i);
        }
        ,onLoadBackStart:function(i,e){
            console.log("onLoadBackStart:"+i);
        }
    });
</script>

//coverColor：图片即将显示时覆盖层的颜色

//coverDiv：图片即将显示时覆盖层可显示的自定义组件

//offsetBottom：图片距离屏幕底部出现时间点的距离差值（注解：延迟加载图片会在图片顶部接触屏幕底部时出现，如果想要让图片顶部距离屏幕底部有一定距离时出现，请设置此值）

//offsetTopm：图片距离屏幕底部出现时间点的距离差值（注解：同上，距离顶部）

//onLoadBackEnd：图片已经完全出现时的回调函数，参数为（index，event）加载的图片下标，以及dom对象（dom对象为jquerydom或zeptodom对象）

//onLoadBackStart：图片已经下载完成，即将开始显示时的回调函数（参数同上）