記錄下頁面懶加載代碼

今天京東在作圖書品類的活動，買了幾本心儀的書，閒暇之餘看了看京東圖書促銷頁前端代碼，有不少的工具類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);
                        };
                    }
                }
            });
        }
    }