你的位置:首页 > 软件开发 > Java > 记录下页面懒加载代码

记录下页面懒加载代码

发布时间:2015-11-01 11:00:05
今天京东在做图书品类的活动,买了几本心仪的书,闲暇之余看了看京东图书促销页前端代码,有很多的工具类js文件,如用于cookie、跨域、数组、业务方面等。突然看到了页面懒加载代码,做下记录。/** * 图片懒加载 */(function(){ if(jQuery.fn.lazyL ...

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

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

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录