记录下页面懒加载代码

今天京东在做图书品类的活动，买了几本心仪的书，闲暇之余看了看京东图书促销页前端代码，有很多的工具类js文件，如用于cookie、跨域、数组、业务方面等。突然看到了页面懒加载代码，做下记录。

/**
 * 图片懒加载
 */
(function(){
    if(jQuery.fn.lazyLoad) return;
    jQuery.fn.lazyLoad = function(config){
        //相关参数
        var conf = jQuery.extend({ 
                defClass:"J_imgLazyload",   //懒加载图片的class   
                defScreen:2,    //默认加载2倍屏幕高度以内的图片
                container:"body",   //img父级元素的class
                orginalSrc:"original"   //存储需要加载的图片路径
            },config||{}),
            lazyImg = (function(){  //获取所有需要懒加载的img数组
                if(conf.container.constructor == String)
                    return jQuery(conf.container + " ." + conf.defClass);
                else if(conf.container.constructor == Array){
                    var comArr = new Array();
                    for(var i = 0,len = conf.container.length;i<len;i++){
                        if(jQuery(conf.container[i] + " ." + conf.defClass).length > 0){
                            comArr.concat(jQuery(conf.container[i]));
                        }
                    }
                    return comArr;
                }else{
                    return {};
                }
            })();
        function load(){    //加载
            var top = jQuery(window).scrollTop()+document.documentElement.clientHeight*conf.defScreen;
            for(var i = 0, len = lazyImg.length;i<len;i++){
                var img = jQuery(lazyImg[i]);
                if(!img.hasClass(conf.defClass) || !img.parents('[instanceid]').length || img.is(':hidden')) continue;
                if(img.offset().top<top){
                    img.removeClass(conf.defClass);
                    img.attr("src",img.attr(conf.orginalSrc));
                    img.removeAttr(conf.orginalSrc);
                }
            }
        }
        jQuery(window).scroll(load).resize(load);
        load();
    };

    jQuery(function(){
        jQuery('body').lazyLoad();
    });
})();

对这些段代码进行了学习，发现自己的基础真心不咋地，需要更加努力的学习，constructor属性并不晓得是什么意思。谷歌了下

它的用法类似与typeof，但是它比typeof更加的精确，特别是在处理函数对象中时。并且constructor它是prototype中的一个属性，prototype包含2个属性一个就是constructor另一个是__proto__，这个属性感觉是处理js的原型链的。

下面是我自己在项目写的懒加载，用于移动web

lazyImg:function(){
        var winH = $(window).height();
        var lazyImg = $('.lazyimg');    //img的父级元素
        scrollTop();
        $(document).on('scroll',function(){
            scrollTop();
        });
        function scrollTop(){
            var top = $(window).scrollTop();
            lazyImg.each(function(){
                var floorTop = $(this).offset().top,
                    scrollH = floorTop-winH;
                top >= scrollH && imgSrc($(this));
            });
        }
        function imgSrc(elem){
            elem.find('img').each(function() {
                var _this = $(this);
                var imgSrc = _this.attr('data-lazyimg');
                if (!publicFun.isNull(imgSrc)) {
                    _this.removeAttr('data-lazyimg');
                    var image = new Image();
                    image.src = imgSrc;
                    if (image.complete) {   //图片有缓存
                        _this.attr("src",imgSrc);
                        _this.fadeIn(600);
                    } else {
                        image.onload = function() { //图片获取成功
                            _this.attr("src",imgSrc);
                            _this.fadeIn(600);
                        };
                    }
                }
            });
        }
    }

 

转载于:https://www.cnblogs.com/skyHF/p/4927312.html