DIV CSS 佈局教程網

前言

網絡上各大論壇，尤其是一些圖片類型的網站上，在圖片加載時均采用了一種名為懶加載的方式，具體表現為，當頁面被請求時，只加載可視區域的圖片，其它部分的圖片則不加載，只有這些圖片出現在可視區域時才會動態加載這些圖片，從而節約了網絡帶寬和提高了初次加載的速度，具體實現的技術並不復雜，下面分別對其說明。

Web 圖片的懶加載就是通過讀取img元素，然後獲得img元素的data-src（也可以約定為其他屬性名）屬性的值，並賦予img的src，從而實現動態加載圖片的機制。

這裡需要注意的是： img在初始化的時候不要設置src屬性，因為即使設置 src='' 浏覽器也會嘗試加載圖片。

一個簡單的圖片懶加載共涉及兩個方面

1. HTML 約定

我們首先需要給准備實施懶加載的img元素添加指定的class 這裡為m-lazyload ,同時將img src賦值給 data-src屬性。

具體示例為：

<img class="m-lazyload" data-src="imgUrl">

2. JavaScript 實現

動態加載總共分為以下幾個步驟，這裡每個步驟都將被拆分為獨立的函數

1. 添加頁面滾動監聽事件

window.addEventListener('scroll', _delay, false);

function _delay() {
 clearTimeout(delay);
 delay = setTimeout(function () {
 _loadImage();
 }, time);
}

2. 當觸發監聽事件時會執行 _loadImage 函數，該函數負責加載圖片

function _loadImage() {
 for (var i = imgList.length; i--;) {
 var el = imgList[i];
 if (_isShow(el)) {
  el.src = el.getAttribute('data-src');
  el.className = el.className.replace(new RegExp("(\\s|^)" + _selector.substring(1, _selector.length) + "(\\s|$)"), " ");
  imgList.splice(i, 1);
 }
 }
}

雖然執行了_loadImage函數，但是我們得知道哪些圖片需要被加載，這裡的判斷依據是什麼呢？

依據就是判斷該圖片是否在當前窗口的可視區域內，在這裡我們封裝一個_isShow函數來實現

function _isShow(el) {
 var coords = el.getBoundingClientRect();
 return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
}

自此一個圖片加載的閉環就形成了

當網頁滾動的事件被觸發 -> 執行加載圖片操作 -> 判斷圖片是否在可視區域內 -> 在，則動態將data-src的值賦予該圖片。

太簡單了？

事實就是如此！！！

如此簡單，不妨擴展一下

添加一些自定義參數，誰都喜歡自定義，不是嗎？

支持iScroll, iScroll是一個高性能，資源占用少，無依賴，多平台的javascript滾動插件。

這裡我們做了些優化

圖片加載後移除選擇器，避免重復判斷。

緩存img元素結合，減少dom元素查詢性能損耗

擴展prototype添加getNode方法，支持分頁數據懶加載（由於我們之前緩存了dom元素）

OK！說了這麼多，show me the code 吧！

(function () {
 var imgList = [], // 頁面所有img元素集合
 delay, // setTimeout 對象
 offset, //偏移量，用於指定圖片距離可視區域多少距離，進行加載
 time, // 延遲載入時間
 _selector; // 選擇器 默認為 .m-lazyload

 function _isShow(el) {
 var coords = el.getBoundingClientRect();
 return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
 }

 function _loadImage() {
 for (var i = imgList.length; i--;) {
  var el = imgList[i];
  if (_isShow(el)) {
  el.src = el.getAttribute('data-src');
  el.className = el.className.replace(new RegExp("(\\s|^)" + _selector.substring(1, _selector.length) + "(\\s|$)"), " ");
  imgList.splice(i, 1);
  }
 }
 }

 function _delay() {
 clearTimeout(delay);
 delay = setTimeout(function () {
  _loadImage();
 }, time);
 }

 function ImageLazyload(selector, options) {
 var defaults = options || {};
 offset = defaults.offset || 0;
 time = defaults.time || 250;
 _selector = selector || '.m-lazyload';
 this.getNode();
 _delay();//避免首次加載未觸發touch事件,主動觸發一次加載函數
 if (defaults.iScroll) {
  defaults.iScroll.on('scroll', _delay);
  defaults.iScroll.on('scrollEnd', _delay);
 } else {
  window.addEventListener('scroll', _delay, false);
 }
 }
 ImageLazyload.prototype.getNode = function () {
 imgList = [];
 var nodes = document.querySelectorAll(_selector);
 for (var i = 0, l = nodes.length; i < l; i++) {
  imgList.push(nodes[i]);
 }
 };
})();

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家學習或者使用圖片懶加載的時候能有所幫助，如果有有疑問大家可以留言交流。