欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解JavaScript的懶加載是如何實現(xiàn)的

 更新時間：2024年01月08日 08:39:59   作者：滾去睡覺  
懶加載（Lazy Loading）是一種在軟件開發(fā)中常用的優(yōu)化技術(shù),它主要用于延遲加載資源,直到真正需要使用的時候才進行加載,這樣可以減少初始加載的時間和資源消耗,并提升用戶體驗,本文給大家詳細介紹了JavaScript的懶加載是如何實現(xiàn)的,需要的朋友可以參考下

淺談一下

懶加載（Lazy Loading）是一種在軟件開發(fā)中常用的優(yōu)化技術(shù)，它主要用于延遲加載資源，直到真正需要使用的時候才進行加載。這樣可以減少初始加載的時間和資源消耗，并提升用戶體驗。

在前端開發(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 屬性設(shè)置為對應(yīng)元素的 data-original 屬性值。
  • 在圖片加載完成后更新元素的 src 屬性，并移除其 data-original 屬性，避免重復(fù)加載。

細節(jié)

  • 在頁面首次打開的時候，我們就得調(diào)用一次lazyload()方法，如果不調(diào)用，就不會加載一開始暴露在屏幕上的圖片
  • 我們需要添加一個監(jiān)聽器，監(jiān)聽window，當發(fā)生滾動事件的時候調(diào)用lazyload()方法，判斷是否有圖片進入屏幕
    lazyLoad()
    window.addEventListener('scroll',lazyLoad)

結(jié)尾

本篇較為簡單，但是懶加載是面試時經(jīng)常會問的內(nèi)容，合理運用懶加載，會給你的程序帶來許多好處...

到此這篇關(guān)于詳解JavaScript的懶加載是如何實現(xiàn)的的文章就介紹到這了,更多相關(guān)JavaScript實現(xiàn)懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論