快捷導(dǎo)航

Javascript實(shí)現(xiàn)圖片懶加載插件的方法

更新時(shí)間：2016年10月20日 10:47:43 投稿：daisy

最近由于公司項(xiàng)目需要，要利用Javascript實(shí)現(xiàn)圖片懶加載效果，嘗試起來(lái)發(fā)現(xiàn)并不難，于是將自己的實(shí)現(xiàn)過(guò)程分享出來(lái)給大家學(xué)習(xí)和參考，希望對(duì)有需要的朋友們帶來(lái)一定的幫助，感興趣的朋友們下面來(lái)一起看看吧。

前言

網(wǎng)絡(luò)上各大論壇，尤其是一些圖片類(lèi)型的網(wǎng)站上，在圖片加載時(shí)均采用了一種名為懶加載的方式，具體表現(xiàn)為，當(dāng)頁(yè)面被請(qǐng)求時(shí)，只加載可視區(qū)域的圖片，其它部分的圖片則不加載，只有這些圖片出現(xiàn)在可視區(qū)域時(shí)才會(huì)動(dòng)態(tài)加載這些圖片，從而節(jié)約了網(wǎng)絡(luò)帶寬和提高了初次加載的速度，具體實(shí)現(xiàn)的技術(shù)并不復(fù)雜，下面分別對(duì)其說(shuō)明。

Web 圖片的懶加載就是通過(guò)讀取img元素，然后獲得img元素的data-src（也可以約定為其他屬性名）屬性的值，并賦予img的src，從而實(shí)現(xiàn)動(dòng)態(tài)加載圖片的機(jī)制。

這里需要注意的是： img在初始化的時(shí)候不要設(shè)置src屬性，因?yàn)榧词乖O(shè)置 src='' 瀏覽器也會(huì)嘗試加載圖片。

一個(gè)簡(jiǎn)單的圖片懶加載共涉及兩個(gè)方面

1. HTML 約定

我們首先需要給準(zhǔn)備實(shí)施懶加載的img元素添加指定的class 這里為m-lazyload ,同時(shí)將img src賦值給 data-src屬性。

具體示例為：

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

2. JavaScript 實(shí)現(xiàn)

動(dòng)態(tài)加載總共分為以下幾個(gè)步驟，這里每個(gè)步驟都將被拆分為獨(dú)立的函數(shù)

1. 添加頁(yè)面滾動(dòng)監(jiān)聽(tīng)事件

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

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

2. 當(dāng)觸發(fā)監(jiān)聽(tīng)事件時(shí)會(huì)執(zhí)行 _loadImage 函數(shù)，該函數(shù)負(fù)責(zé)加載圖片

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);
 }
 }
}

雖然執(zhí)行了_loadImage函數(shù)，但是我們得知道哪些圖片需要被加載，這里的判斷依據(jù)是什么呢？

依據(jù)就是判斷該圖片是否在當(dāng)前窗口的可視區(qū)域內(nèi)，在這里我們封裝一個(gè)_isShow函數(shù)來(lái)實(shí)現(xiàn)

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

自此一個(gè)圖片加載的閉環(huán)就形成了

當(dāng)網(wǎng)頁(yè)滾動(dòng)的事件被觸發(fā) -> 執(zhí)行加載圖片操作 -> 判斷圖片是否在可視區(qū)域內(nèi) -> 在，則動(dòng)態(tài)將data-src的值賦予該圖片。

太簡(jiǎn)單了？

事實(shí)就是如此?。。?/p>

如此簡(jiǎn)單，不妨擴(kuò)展一下

添加一些自定義參數(shù)，誰(shuí)都喜歡自定義，不是嗎？

支持iScroll, iScroll是一個(gè)高性能，資源占用少，無(wú)依賴(lài)，多平臺(tái)的javascript滾動(dòng)插件。

這里我們做了些優(yōu)化

圖片加載后移除選擇器，避免重復(fù)判斷。

緩存img元素結(jié)合，減少dom元素查詢(xún)性能損耗

擴(kuò)展prototype添加getNode方法，支持分頁(yè)數(shù)據(jù)懶加載（由于我們之前緩存了dom元素）

OK！說(shuō)了這么多，show me the code 吧！

(function () {
 var imgList = [], // 頁(yè)面所有img元素集合
 delay, // setTimeout 對(duì)象
 offset, //偏移量，用于指定圖片距離可視區(qū)域多少距離，進(jìn)行加載
 time, // 延遲載入時(shí)間
 _selector; // 選擇器 默認(rèn)為 .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();//避免首次加載未觸發(fā)touch事件,主動(dòng)觸發(fā)一次加載函數(shù)
 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]);
 }
 };
})();

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者使用圖片懶加載的時(shí)候能有所幫助，如果有有疑問(wèn)大家可以留言交流。

您可能感興趣的文章: