摘要:一個(gè)簡(jiǎn)單的圖片懶加載共涉及兩個(gè)方面,約定我們首先需要給準(zhǔn)備實(shí)施懶加載的元素添加指定的這里為同時(shí)將賦值給屬性。
源碼地址
歡迎一起交流插件完整版地址 m-lazy
https://github.com/zhanyouwei...
歡迎關(guān)注我的個(gè)人公眾號(hào),不定期更新自己的工作心得。
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屬性。
具體示例為:
動(dòng)態(tài)加載總共分為以下幾個(gè)步驟,這里每個(gè)步驟都將被拆分為獨(dú)立的函數(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ù)就是判斷該圖片是否在當(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í)就是如此!!!
如此簡(jiǎn)單,不妨擴(kuò)展一下添加一些自定義參數(shù),誰(shuí)都喜歡自定義,不是嗎?
支持iScroll, iScroll是一個(gè)高性能,資源占用少,無(wú)依賴,多平臺(tái)的javascript滾動(dòng)插件。
圖片加載后移除選擇器,避免重復(fù)判斷。
緩存img元素結(jié)合,減少dom元素查詢性能損耗
擴(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]); } }; })();
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/78981.html
摘要:一個(gè)簡(jiǎn)單的圖片懶加載共涉及兩個(gè)方面,約定我們首先需要給準(zhǔn)備實(shí)施懶加載的元素添加指定的這里為同時(shí)將賦值給屬性。 源碼地址 插件完整版地址 m-lazyhttps://github.com/zhanyouwei... 歡迎一起交流 歡迎關(guān)注我的個(gè)人公眾號(hào),不定期更新自己的工作心得。showImg(https://segmentfault.com/img/bVEk23?w=258&h=258...
摘要:前端優(yōu)化已經(jīng)是一個(gè)被寫(xiě)爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優(yōu)化的一個(gè)重點(diǎn),特別是針對(duì)的優(yōu)化。如果你對(duì)前端性能優(yōu)化有自己的想法,歡迎騷擾我。 前端優(yōu)化已經(jīng)是一個(gè)被寫(xiě)爛的題材了。 雖千萬(wàn)人吾往矣,這里我僅分享我的一些實(shí)踐經(jīng)驗(yàn)。 歡迎一起交流 歡迎關(guān)注我的個(gè)人公眾號(hào),不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...
摘要:前端優(yōu)化已經(jīng)是一個(gè)被寫(xiě)爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優(yōu)化的一個(gè)重點(diǎn),特別是針對(duì)的優(yōu)化。如果你對(duì)前端性能優(yōu)化有自己的想法,歡迎騷擾我。 前端優(yōu)化已經(jīng)是一個(gè)被寫(xiě)爛的題材了。 雖千萬(wàn)人吾往矣,這里我僅分享我的一些實(shí)踐經(jīng)驗(yàn)。 歡迎一起交流 歡迎關(guān)注我的個(gè)人公眾號(hào),不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...
閱讀 2416·2021-11-25 09:43
閱讀 1195·2021-09-07 10:16
閱讀 2603·2021-08-20 09:38
閱讀 2936·2019-08-30 15:55
閱讀 1449·2019-08-30 13:21
閱讀 883·2019-08-29 15:37
閱讀 1435·2019-08-27 10:56
閱讀 2093·2019-08-26 13:45