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下載連接。