原生JS實(shí)現(xiàn)圖片懶加載(lazyload)實(shí)例
前言
圖片懶加載也是比較常見(jiàn)的一種性能優(yōu)化的方法,最近在用vue做一個(gè)新聞列表的客戶端時(shí)也用到了,這里就簡(jiǎn)單介紹下實(shí)現(xiàn)原理和部分代碼。
實(shí)現(xiàn)原理
加載頁(yè)面的時(shí)候,圖片一直都是流量大頭,針對(duì)圖片的性能方法也挺多的比如base64、雪碧圖等;懶加載也是其中一種,主要原理是將非首屏的圖片src設(shè)為一個(gè)默認(rèn)值,然后監(jiān)聽(tīng)窗口滾動(dòng),當(dāng)圖片出現(xiàn)在視窗中時(shí)再給他賦予真實(shí)的圖片地址,這樣可以保證首屏的加載速度然后按需加載圖片。
具體代碼
首先在渲染時(shí),圖片引用默認(rèn)圖片,然后把真實(shí)地址放在data-*屬性上面。
<image src='./../assets/default.png' :data-src='item.allPics' class='lazyloadimg'>
然后是監(jiān)聽(tīng)滾動(dòng),直接用window.onscroll就可以了,但是要注意一點(diǎn)的是類似于window的scroll和resize,還有mousemove這類觸發(fā)很頻繁的事件,最好用節(jié)流(throttle)或防抖函數(shù)(debounce)來(lái)控制一下觸發(fā)頻率。underscore和lodash里面都有封裝這兩個(gè)方法,這里先不多做介紹了。
接著要判斷圖片是否出現(xiàn)在了視窗里面,主要是三個(gè)高度:1,當(dāng)前body從頂部滾動(dòng)了多少距離。2,視窗的高度。3,當(dāng)前圖片距離頂部的距離。具體代碼如下:
window.onscroll =_.throttle(this.watchscroll, 200); watchscroll () { var bodyScrollHeight = document.body.scrollTop;// body滾動(dòng)高度 var windowHeight = window.innerHeight;// 視窗高度 var imgs = document.getElementsByClassName('lazyloadimg'); for (var i =0; i < imgs.length; i++) { var imgHeight = imgs[i].offsetTop;// 圖片距離頂部高度 if (imgHeight < windowHeight + bodyScrollHeight) { imgs[i].src = imgs[i].getAttribute('data-src'); img[i].className = img[i].className.replace('lazyloadimg','') } } }
結(jié)語(yǔ)
大概內(nèi)容就這么多了,下次可能會(huì)補(bǔ)充一下防抖節(jié)流源碼的實(shí)現(xiàn)。最后再補(bǔ)充兩個(gè)常見(jiàn)的滾動(dòng)判斷:
1.頁(yè)面滾動(dòng)離開(kāi)首屏(這時(shí)可顯示回到頂部的按鈕):document.body.scrollTop > window.innerHeight
2.頁(yè)面滾動(dòng)到底部了(這時(shí)可去調(diào)接口獲取更多內(nèi)容):window.scrollY + window.innerHeight > document.body.offsetHeight
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS圖片無(wú)縫滾動(dòng)(簡(jiǎn)單利于使用)
現(xiàn)在又想做一個(gè)無(wú)縫滾動(dòng)了,所以在網(wǎng)上找啊找,好多都是相同的,而且調(diào)試復(fù)雜,好多都不能動(dòng),也懶得去細(xì)看,終于讓我發(fā)現(xiàn)了這個(gè),希望能幫到別人:2013-06-06跟我學(xué)習(xí)javascript的嚴(yán)格模式
跟我學(xué)習(xí)javascript的嚴(yán)格模式,對(duì)javascript嚴(yán)格模式進(jìn)行概述,進(jìn)入嚴(yán)格模式的方法,以及如何調(diào)用和相關(guān)語(yǔ)法,感興趣的小伙伴們可以參考一下2015-11-11JavaScript數(shù)據(jù)結(jié)構(gòu)中棧的應(yīng)用之表達(dá)式求值問(wèn)題詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)中棧的應(yīng)用之表達(dá)式求值問(wèn)題,詳細(xì)分析了中綴表達(dá)式、后綴表達(dá)式等概念、原理與轉(zhuǎn)換方法,以及基于后綴表達(dá)式實(shí)現(xiàn)的表達(dá)式求值相關(guān)操作技巧,需要的朋友可以參考下2017-04-04ES6 javascript中class靜態(tài)方法、屬性與實(shí)例屬性用法示例
這篇文章主要介紹了ES6 javascript中class靜態(tài)方法、屬性與實(shí)例屬性用法,結(jié)合實(shí)例形式分析了ES6中類的靜態(tài)方法、靜態(tài)屬性概念、功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-10-10跟我學(xué)Nodejs(一)--- Node.js簡(jiǎn)介及安裝開(kāi)發(fā)環(huán)境
這篇文章主要介紹了Node.js簡(jiǎn)介及安裝開(kāi)發(fā)環(huán)境,需要的朋友可以參考下2014-05-05