JS图片延迟加载分析及简单的demo

JS图片延迟加载

       图片延迟加载也称 "懒加载"，一般应用于图片比较多的网页，好比 "美丽说首页"，"蘑菇街"等一些导购网站上用的比较多，或者淘宝,京东等电子商务网站上也用的比较多，由于页面加载时候 假如咱们没有用延迟加载的话 那么页面上不少图片，首先要发n多个请求，性能确定不怎么好，而咱们用延迟加载技术，页面打开时候 只加载第一屏数据，第二屏以上都用延迟加载 滚动的时候进行加载，这样的话 假如页面无论他有n屏的话 那么咱们只管加载第一屏的数据，后面不作操做。这样就能够显著的提升页面的加载速度，提高用户体验。且更小的并发请求也能够减轻服务器的压力，并且若是用 户只浏览首屏的话，还能够节省流量(手机客户端应该用的比较多，减小用户流量)。

延迟加载的原理是？

      我这边原理是先在img src中放一张占位符图片，而真实的图片地址存放在相对应一个属性 data-img(后缀img能够自定义)中，这样的话 那么页面加载的时候 只加载src地址 不会对属性的图片真正地址加载，滚动时候判断 待加载的资源相对于浏览器顶端的距离 <= 可视区域相对于浏览器顶端的距离 若是为true的话 则把相对应的data-img值赋值给src 不然不加载。

先看看JSFiddle的demo效果

 若是最外层容器是window的话 那么请看这个demo  demo连接

 若是本身定义了最外层容器的话 那么请看这个demo demo连接 

可配置的参数以下：

container	window，容器 默认为window
threshold	灵敏度。默认为 0 表示当图片出如今显示区域中的当即加载显示；设为整数表示图片距离 x 像素进入显示区域时进行加载；设为负数表示图片进入显示区域 x 像素时进行加载。
event	默认为scroll(滚动)
effect	默认为fadeIn 也能够为fadeIn, slideDown 等 jQuery 自带的效果
effectspeed	1000,   effect的时间 默认为1000(毫秒)
suffix	'img', img属性 默认以data-img 也能够自定义后缀
skip_invisible	若是img标签为隐藏的 那么不强制加载(好比display：none等) 默认为true

代码简单的分析下：

  1.页面初始化init时候 只处理一个滚动事件：以下调用update方法：

init: function(options){ this.config = $.extend(this.config, options || {}); var self = this, _config = self.config, _cache = self.cache; // 滚动时(或者其余事件) 触发事件  $(_config.container).unbind(_config.event); $(_config.container).bind(_config.event,function(){ self._update(); }); }

  2.update方法先判断下 容器是不是window仍是自定义容器。且对向下滚动及向右滚动进行了一下处理。接着调用_eachImg这个方法。代码以下：

_update:function(){ var self = this, _config = self.config, _cache = self.cache; if(_config.container === window) { $('img').each(function(index,item){ // 若是图片隐藏的 那么不强制加载 if(_config.skip_invisible && !$('img').is(":visible")) { return; } if (self._abovethetop(item) || self._leftofbegin(item)) { // 什么都不处理 } else if (self._belowthefold(item) && self._belowthefold(item)) { self._eachImg(item); } }) }else { $('img',$(_config.container)).each(function(index,item){ // 若是图片隐藏的 那么不强制加载 if(_config.skip_invisible && !$('img').is(":visible")) { return; } if (self._abovethetop(item) || self._leftofbegin(item)) { } else if (self._belowthefold(item) && self._rightoffold(item)) { self._eachImg(item); } }) } },

  3.在调用eachImg方法以前 先判断向下滚动或者向右滚动 元素是否在可视区域内 如在 则调用eachImg方法 把对应的data-img赋值给src 不然 反之。

HTML代码以下：

View Code

JS全部代码以下：

View Code

初始化方式以下：

// 初始化的方式 $(function(){ var datalazy = new DataLazyLoad({ container: '#demo' }); });

也能够根据本身自动配置。

demo下载连接。