JavaScript懶加載詳解
懶加載
顧名思義比較懶,不想全部加載出來,當(dāng)用戶什么時候想看我在加載后面的東西
概括:懶加載其實就是延時加載,即當(dāng)對象需要用到的時候再去加載。
實現(xiàn)原理:
首先你要有很多個第一張用來加載的圖片,加載完畢之后顯示后面所需的圖片
步驟實現(xiàn):
1.加載load圖片
2.判斷哪些圖片要加載
3.隱形加載圖片
4.替換真圖片
CSS樣式:
<style> img { width: 400px; height: 300px; display: block; } .row{ width: 300px; height: 400px; } </style>
HTML部分:
<img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (1).jpeg"> <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (3).jpeg""> <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (9).jpeg""> <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (10).jpg""> <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (13).jpeg""> <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (92).jpeg""> <img src="image/load.gif" alt="" data-original="image/圖片 (1).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (2).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (19).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (23).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (33).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (37).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (38).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (39).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (40).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (41).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (42).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (43).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (44).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (45).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (46).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (47).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (48).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (49).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (50).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (51).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (52).jpg"> <img src="image/load.gif"alt="" data-original=" image/圖片 (53).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (54).jpg">
為什么有兩個路徑?因為一個img中有一張真圖片和一張假圖片,我們得用先用假圖片進(jìn)行加載,然后用真圖片去替換,下圖中假圖片為左側(cè),真圖片為右側(cè)
script部分 :
<script> let view = document.documentElement.clientHeight;//獲取瀏覽器窗口可視區(qū)的高度 function fn1(){ setTimeout(function lazyload() { //添加一個定時器一秒鐘后開始執(zhí)行 let imgs = document.querySelectorAll('img'); // 獲取所有img標(biāo)簽 // console.log(imgs); for (let item of imgs) { // 使用for-of遍歷所有圖片 // 顯示圖片出現(xiàn)在瀏覽器的位置 let rect = item.getBoundingClientRect(); // 找到每一個圖片在可視區(qū)上的位置 console.log(rect); if (rect.bottom >= 0 && rect.top < view) { //給個if語句如果圖片的底部大于0并且小于這個瀏覽器的可視區(qū)域 ,就執(zhí)行以下操作 item.src = item.getAttribute('data-original') // 獲取data-original的路徑傳給img } } },1000) } fn1(); document.addEventListener('scroll',fn1) //當(dāng)滾動事件發(fā)生時就開始執(zhí)行fn1函數(shù)里的任務(wù) </script>
為什么用for-of而不用for-in或者for循環(huán)?具體可以去參考ES6中for-of獲取的是什么
效果如下:
完整代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>懶加載</title> <style> img { width: 400px; height: 300px; display: block; } .row{ width: 300px; height: 400px; } </style> </head> <body> <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (1).jpeg"> <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (3).jpeg""> <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (9).jpeg""> <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (10).jpg""> <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (13).jpeg""> <img class="rwo" src="image/load.gif" alt="" data-original="image/圖片 (92).jpeg""> <img src="image/load.gif" alt="" data-original="image/圖片 (1).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (2).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (19).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (23).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (33).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (37).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (38).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (39).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (40).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (41).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (42).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (43).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (44).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (45).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (46).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (47).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (48).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (49).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (50).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (51).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (52).jpg"> <img src="image/load.gif"alt="" data-original=" image/圖片 (53).jpg"> <img src="image/load.gif" alt="" data-original="image/圖片 (54).jpg"> <script> let view = document.documentElement.clientHeight; function fn1(){ setTimeout(function lazyload() { let imgs = document.querySelectorAll('img'); // console.log(imgs); for (let item of imgs) { // 顯示圖片出現(xiàn)在瀏覽器的位置 let rect = item.getBoundingClientRect(); console.log(rect); if (rect.bottom >= 0 && rect.top < view) { item.src = item.getAttribute('data-original') } } },1000) } fn1(); document.addEventListener('scroll',fn1) </script> </body> </html>
下面附上加載圖片,當(dāng)然了也可以自己找的(自己找的話我覺得挺麻煩的 —.—),如果其他圖片也“懶”的自己找的話可以私我我整理好發(fā)給你 ღ( ´・ᴗ・` )
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
JAVASCRIPT車架號識別/驗證函數(shù)代碼 汽車車架號驗證程序
偶然中在CSDN里找到C#版的驗證程序,因此改編了一版JS版本,相信會對大家有用2012-01-01Javascript讀取上傳文件內(nèi)容/類型/字節(jié)數(shù)
這篇文章主要為大家詳細(xì)介紹了Javascript讀取上傳文件內(nèi)容/類型/字節(jié)數(shù),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-04-04JS控件bootstrap suggest plugin使用方法詳解
這篇文章主要介紹了JS控件bootstrap suggest plugin的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03js實現(xiàn)a標(biāo)簽超鏈接提交form表單的方法
這篇文章主要介紹了js實現(xiàn)a標(biāo)簽超鏈接提交form表單的方法,涉及javascript針對表單操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06JS不同運算符下隱式類型轉(zhuǎn)換的實現(xiàn)示例
隱式轉(zhuǎn)換就是自動轉(zhuǎn)換,通常發(fā)生在一些數(shù)學(xué)運算中,本文就來介紹一下JS不同運算符下隱式類型轉(zhuǎn)換的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-12-12Javascript showModalDialog兩個窗體之間傳值
前一篇文章Javascript怎么在兩個窗體之間傳值中講到了如何利用window.open()方法打開新窗體,并在兩個窗體之間傳值的方法。2009-09-09使用classList來實現(xiàn)兩個按鈕樣式的切換方法
下面小編就為大家分享一篇使用classList來實現(xiàn)兩個按鈕樣式的切換方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01