前言
網(wǎng)絡上各大論壇，尤其是一些圖片類型的網(wǎng)站上，在圖片加載時均采用了一種名為懶加載的方式，具體表現(xiàn)為，當頁面被請求時，只加載可視區(qū)域的圖片，其它部分的圖片則不加載，只有這些圖片出現(xiàn)在可視區(qū)域時才會動態(tài)加載這些圖片，從而節(jié)約了網(wǎng)絡帶寬和提高了初次加載的速度，具體實現(xiàn)的技術并不復雜，下面分別對其說明。
Web 圖片的懶加載就是通過讀取img元素，然后獲得img元素的data-src（也可以約定為其他屬性名）屬性的值，并賦予img的src，從而實現(xiàn)動態(tài)加載圖片的機制。
這里需要注意的是： img在初始化的時候不要設置src屬性，因為即使設置 src='' 瀏覽器也會嘗試加載圖片。
一個簡單的圖片懶加載共涉及兩個方面
1. HTML 約定
我們首先需要給準備實施懶加載的img元素添加指定的class 這里為m-lazyload ,同時將img src賦值給 data-src屬性。
具體示例為：
<img class="m-lazyload" data-src="imgUrl">
2. JavaScript 實現(xiàn)
動態(tài)加載總共分為以下幾個步驟，這里每個步驟都將被拆分為獨立的函數(shù)
1. 添加頁面滾動監(jiān)聽事件
window.addEventListener('scroll', _delay, false);function _delay() { clearTimeout(delay); delay = setTimeout(function () { _loadImage(); }, time);}2. 當觸發(fā)監(jiān)聽事件時會執(zhí)行 _loadImage 函數(shù)，該函數(shù)負責加載圖片
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ù)就是判斷該圖片是否在當前窗口的可視區(qū)域內(nèi)，在這里我們封裝一個_isShow函數(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));}自此一個圖片加載的閉環(huán)就形成了
當網(wǎng)頁滾動的事件被觸發(fā) -> 執(zhí)行加載圖片操作 -> 判斷圖片是否在可視區(qū)域內(nèi) -> 在，則動態(tài)將data-src的值賦予該圖片。
太簡單了？
事實就是如此！！！
如此簡單，不妨擴展一下
添加一些自定義參數(shù)，誰都喜歡自定義，不是嗎？
支持iScroll, iScroll是一個高性能，資源占用少，無依賴，多平臺的javascript滾動插件。
這里我們做了些優(yōu)化
圖片加載后移除選擇器，避免重復判斷。
緩存img元素結合，減少dom元素查詢性能損耗
擴展prototype添加getNode方法，支持分頁數(shù)據(jù)懶加載（由于我們之前緩存了dom元素）
OK！說了這么多，show me the code 吧！
(function () { var imgList = [], // 頁面所有img元素集合 delay, // setTimeout 對象 offset, //偏移量，用于指定圖片距離可視區(qū)域多少距離，進行加載 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();//避免首次加載未觸發(fā)touch事件,主動觸發(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]); } };})();總結
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學習或者使用圖片懶加載的時候能有所幫助，如果有有疑問大家可以留言交流。
新聞熱點
疑難解答
