詳解JavaScript的懶加載是如何實現(xiàn)的
更新時間：2024年01月08日 08:39:59 作者：滾去睡覺
懶加載（Lazy Loading）是一種在軟件開發(fā)中常用的優(yōu)化技術,它主要用于延遲加載資源,直到真正需要使用的時候才進行加載,這樣可以減少初始加載的時間和資源消耗,并提升用戶體驗,本文給大家詳細介紹了JavaScript的懶加載是如何實現(xiàn)的,需要的朋友可以參考下
淺談一下
懶加載（Lazy Loading）是一種在軟件開發(fā)中常用的優(yōu)化技術，它主要用于延遲加載資源，直到真正需要使用的時候才進行加載。這樣可以減少初始加載的時間和資源消耗，并提升用戶體驗。
在前端開發(fā)中，懶加載通常用于圖片、視頻等資源的加載。當頁面滾動到某個元素時，再去加載該元素所需的資源，而不是一次性加載所有內(nèi)容。這樣可以避免頁面初始加載時的延遲和帶寬消耗，提高頁面加載速度。
那么我們?nèi)绾螌崿F(xiàn)一個懶加載？？
思考
要實現(xiàn)懶加載，我們該如何去做？
- 放上許多圖片
放上許多圖片模擬
- 獲取屏幕大小和圖片大小
要想實現(xiàn)圖片暴露在屏幕上就開始加載，就得獲取屏幕大小和圖片大小
- 動態(tài)添加圖片路徑
要實現(xiàn)不暴露不加載，一暴露就加載，我們就得動態(tài)添加一個src路徑，當暴露時，添加路徑，就可以實現(xiàn)懶加載了
實現(xiàn)
- 放上圖片
<img class='img-item' src="" data-original="https://media.indiedb.com/images/downloads/1/141/140388/logo_tup.jpg" alt=""> <img class='img-item' src="" data-original="https://ts1.cn.mm.bing.net/th/id/R-C.fe8303a785a33189e4e24ba530a70382?rik=dVxkKcgbWxyRLQ&riu=http%3a%2f%2fwww.laverocks.co.uk%2fgilslandmag%2fdesktops%2fxtup_800.jpg.pagespeed.ic.wb_S4EVXgU.jpg&ehk=4fkPQNq86UOkGhr71pywhwmmtLYHv6hcTrwLxq9%2fbBA%3d&risl=&pid=ImgRaw&r=0" alt=""> <img class='img-item' src="" data-original="https://ts1.cn.mm.bing.net/th/id/R-C.d4bfc069bb714818229338c5bd04b59e?rik=OutLpnfhKxV%2bKA&riu=http%3a%2f%2fwww.appzyw.net%2fupfiles%2fimage%2f202001%2f20200112113023601.jpg&ehk=0ot9LOln80CuJBFt66nhpE1JUD0dOt3hXb8dQJmY0Y4%3d&risl=&pid=ImgRaw&r=0" alt=""> <img class='img-item' src="" data-original="https://ts1.cn.mm.bing.net/th/id/R-C.7ecdb52cb56c0e121025e1b752296fb3?rik=tTsFgweG5QNWIQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f27%2f9727_7.jpg&ehk=fzaYq%2brx5WqWQ2zu7P3Mqgnmwiq4Nx%2fbDftpz3vaf7w%3d&risl=&pid=ImgRaw&r=0" alt=""> <img class='img-item' src="" data-original="https://pic4.zhimg.com/v2-497305b2ee426db31db4e5d2125fbb87_r.jpg" alt="">
在這里，我們并沒有直接把文件路徑丟給src，而是給了一個data-original，在后面，我們將動態(tài)讓src=data-original
- 獲取屏幕大小
let viewHeight = window.innerHeight
- 動態(tài)添加路徑
function lazyLoad(){
let imgs = document.querySelectorAll('img')
Array.from(imgs).forEach(el=>{
let rect = el.getBoundingClientRect()
if(rect.top<viewHeight){
let image = new Image()
image.src = el.dataset.original
image.onload = function(){
el.src = image.src
}
el.removeAttribute('data-original')
}
})
}
- 使用 document.querySelectorAll() 方法獲取頁面中所有需要懶加載的圖片元素，這里使用了選擇器 img。
- 使用 Array.from() 方法將 NodeList 對象轉(zhuǎn)換為數(shù)組。
- 遍歷每個元素，獲取其相對于視口的位置信息。
- 如果元素的頂部位置小于視口高度，則表示該元素已經(jīng)進入了可視區(qū)域，需要進行懶加載。
- 創(chuàng)建一個新的 Image 對象，并將其 src 屬性設置為對應元素的 data-original 屬性值。
- 在圖片加載完成后更新元素的 src 屬性，并移除其 data-original 屬性，避免重復加載。
細節(jié)
- 在頁面首次打開的時候，我們就得調(diào)用一次lazyload()方法，如果不調(diào)用，就不會加載一開始暴露在屏幕上的圖片
- 我們需要添加一個監(jiān)聽器，監(jiān)聽window，當發(fā)生滾動事件的時候調(diào)用lazyload()方法，判斷是否有圖片進入屏幕
lazyLoad()
window.addEventListener('scroll',lazyLoad)
結尾
本篇較為簡單，但是懶加載是面試時經(jīng)常會問的內(nèi)容，合理運用懶加載，會給你的程序帶來許多好處...
到此這篇關于詳解JavaScript的懶加載是如何實現(xiàn)的的文章就介紹到這了,更多相關JavaScript實現(xiàn)懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
uni-app是一個使用vue.js開發(fā)所有前端應用的框架,開發(fā)者編寫一套代碼,下面這篇文章主要給大家介紹了關于uniapp基礎知識點掌握以及面試題整理的相關資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了JavaScript如何生成二維數(shù)組問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
JavaScript中的流程控制語句是編寫復雜邏輯和控制程序執(zhí)行順序的關鍵元素,這篇文章主要介紹了JavaScript流程控制語句的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-12-12
本文主要介紹了javascript中的事件冒泡和事件捕獲，具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
一個支持ff的modaldialog的js代碼...2007-03-03
這篇文章主要介紹了Typescrip異步函數(shù)Promise使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要對實現(xiàn)一個簡單的js加載器的步驟進行介紹--主要可以分為解析路徑、下載模塊、解析模塊依賴、解析模塊四個步驟。需要的朋友來看下吧2016-12-12
Javascript 實現(xiàn)微信分享（QQ、朋友圈、分享給朋友）
這篇文章主要介紹了Javascript 實現(xiàn)微信分享（QQ、朋友圈、分享給朋友）的相關資料,需要的朋友可以參考下2016-10-10
這篇文章主要從作用域鏈談閉包，閉包（closure）是Javascript語言的一個難點，也是它的特色，很多高級應用都要依靠閉包實現(xiàn)，本文針對閉包進行學習,需要的朋友可以參考下2015-12-12
本章節(jié)討論使用ES6編碼風格到代碼中需要注意的點。通過記住這些關鍵點，可以讓我們寫出更優(yōu)美的、可讀性更強的JavaScript ES6風格的代碼。2021-05-05