JavaScript懶加載詳解
更新時(shí)間：2021年11月01日 15:34:00 作者：Nanchen_42
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)頁面數(shù)據(jù)懶加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
懶加載
顧名思義比較懶，不想全部加載出來，當(dāng)用戶什么時(shí)候想看我在加載后面的東西
概括：懶加載其實(shí)就是延時(shí)加載，即當(dāng)對象需要用到的時(shí)候再去加載。
實(shí)現(xiàn)原理：
首先你要有很多個(gè)第一張用來加載的圖片，加載完畢之后顯示后面所需的圖片
步驟實(shí)現(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">
為什么有兩個(gè)路徑？因?yàn)橐粋€(gè)img中有一張真圖片和一張假圖片，我們得用先用假圖片進(jìn)行加載，然后用真圖片去替換，下圖中假圖片為左側(cè)，真圖片為右側(cè)
script部分 ：
<script>
let view = document.documentElement.clientHeight;//獲取瀏覽器窗口可視區(qū)的高度
function fn1(){
setTimeout(function lazyload() { //添加一個(gè)定時(shí)器一秒鐘后開始執(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(); // 找到每一個(gè)圖片在可視區(qū)上的位置
console.log(rect);
if (rect.bottom >= 0 && rect.top < view) { //給個(gè)if語句如果圖片的底部大于0并且小于這個(gè)瀏覽器的可視區(qū)域 ，就執(zhí)行以下操作
item.src = item.getAttribute('data-original') // 獲取data-original的路徑傳給img
}
}
},1000)
}
fn1();
document.addEventListener('scroll',fn1) //當(dāng)滾動(dòng)事件發(fā)生時(shí)就開始執(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í)現(xiàn)簡單驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
js 實(shí)現(xiàn)css風(fēng)格選擇器（壓縮后2KB）
近日在做一些OA前端界面，為了更好管理頁面代碼想寫個(gè)js選擇器，寫著寫著發(fā)現(xiàn)很費(fèi)力，索性在網(wǎng)上找找看，功夫不負(fù)有心人， 找到一個(gè)mini css選擇器，且性能不凡：以下代碼是壓縮后的，僅2KB2012-01-01
簡單實(shí)例處理url特殊符號(hào)&處理(2種方法)
url里的參數(shù)內(nèi)容包含&符合，我有兩種方法解決一是：在頁面用JS轉(zhuǎn)碼;二是：在后端處理，另外還有網(wǎng)絡(luò)分享的一些方法，感興趣的朋友可以參考下哈2013-04-04
踩了很多次坑,終于在微信小程序中搞定了圖片上傳以及內(nèi)容安全審核,下面這篇文章主要給大家介紹了關(guān)于微信小程序圖片上傳以及內(nèi)容安全審核的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要介紹了js獲取本機(jī)操作系統(tǒng)類型的方法,需要的朋友可以參考下2015-12-12
很棒的JavaScript選項(xiàng)卡切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要給大家介紹了關(guān)于如何通過JavaScript讀取元素的樣式,文中通過實(shí)例代碼以及圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了JavaScript中set與get方法用法,簡單描述了set與get方法的功能,并結(jié)合實(shí)例形式分析了set與get方法的具體使用技巧,需要的朋友可以參考下2018-08-08
JavaScript判斷變量是否為空的自定義函數(shù)分享
這篇文章主要介紹了JavaScript判斷變量是否為空的自定義函數(shù)分享,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-01-01
優(yōu)化 JavaScript 代碼的方法小結(jié)
客戶端腳本能讓你的應(yīng)用更加地動(dòng)態(tài)和活躍， 但是瀏覽器對代碼的解析可能造成效率問題， 而這種性能差異在客戶端之間也不盡相同。 這里我們討論和給出一些優(yōu)化你的 JavaScript 代碼的提示和最佳實(shí)踐。2009-07-07