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