資訊專欄INFORMATION COLUMN
摘要：一個簡單的圖片懶加載共涉及兩個方面，約定我們首先需要給準備實施懶加載的元素添加指定的這里為同時將賦值給屬性。
源碼地址
歡迎一起交流插件完整版地址 m-lazy
https://github.com/zhanyouwei...
歡迎關(guān)注我的個人公眾號，不定期更新自己的工作心得。
Web 圖片的懶加載就是通過讀取img元素，然后獲得img元素的data-src（也可以約定為其他屬性名）屬性的值，并賦予img的src，從而實現(xiàn)動態(tài)加載圖片的機制。
這里需要注意的是： img在初始化的時候不要設(shè)置src屬性，因為即使設(shè)置 src="" 瀏覽器也會嘗試加載圖片。
一個簡單的圖片懶加載共涉及兩個方面，
1. HTML 約定我們首先需要給準備實施懶加載的img元素添加指定的class 這里為m-lazyload ,同時將img src賦值給 data-src屬性。
具體示例為：
2. JavaScript 實現(xiàn)
動態(tài)加載總共分為以下幾個步驟，這里每個步驟都將被拆分為獨立的函數(shù)
window.addEventListener("scroll", _delay, false);
function _delay() {
clearTimeout(delay);
delay = setTimeout(function () {
_loadImage();
}, time);
}
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的值賦予該圖片。
太簡單了？事實就是如此?。。?/strong>
如此簡單，不妨擴展一下添加一些自定義參數(shù)，誰都喜歡自定義，不是嗎？
支持iScroll, iScroll是一個高性能，資源占用少，無依賴，多平臺的javascript滾動插件。
圖片加載后移除選擇器，避免重復(fù)判斷。
緩存img元素結(jié)合，減少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]);
}
};
})();
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49805.html
摘要：一個簡單的圖片懶加載共涉及兩個方面，約定我們首先需要給準備實施懶加載的元素添加指定的這里為同時將賦值給屬性。 源碼地址 插件完整版地址 m-lazyhttps://github.com/zhanyouwei... 歡迎一起交流 歡迎關(guān)注我的個人公眾號，不定期更新自己的工作心得。showImg(https://segmentfault.com/img/bVEk23?w=258&h=258...
摘要：前端優(yōu)化已經(jīng)是一個被寫爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優(yōu)化的一個重點，特別是針對的優(yōu)化。如果你對前端性能優(yōu)化有自己的想法，歡迎騷擾我。 前端優(yōu)化已經(jīng)是一個被寫爛的題材了。 雖千萬人吾往矣，這里我僅分享我的一些實踐經(jīng)驗。 歡迎一起交流 歡迎關(guān)注我的個人公眾號，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...
摘要：前端優(yōu)化已經(jīng)是一個被寫爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優(yōu)化的一個重點，特別是針對的優(yōu)化。如果你對前端性能優(yōu)化有自己的想法，歡迎騷擾我。 前端優(yōu)化已經(jīng)是一個被寫爛的題材了。 雖千萬人吾往矣，這里我僅分享我的一些實踐經(jīng)驗。 歡迎一起交流 歡迎關(guān)注我的個人公眾號，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...
閱讀 1758·2021-11-24 10:18
閱讀 2277·2021-11-18 13:20
閱讀 2366·2021-08-23 09:46
閱讀 1022·2019-08-30 15:56
閱讀 2865·2019-08-30 15:53
閱讀 777·2019-08-30 14:22
閱讀 492·2019-08-29 15:34
閱讀 2561·2019-08-29 12:14
