记录下页面懒加载代码

今天京东在做图书品类的活动，买了几本心仪的书，闲暇之余看了看京东图书促销页前端代码，有很多的工具类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);            };          }        }      });    }  }

原标题：记录下页面懒加载代码

关键词：