簡單高效實現(xiàn)一個按需加載圖片的邏輯。

keke 發(fā)布于2019-08-26 10:32 / 1360人閱讀

摘要：需求根據(jù)頁面滾動，當(dāng)圖片進(jìn)入視野，就開始加載，否則不加載任何圖片。頁面加載完成時先調(diào)用一下，首屏內(nèi)的圖片。

需求：
根據(jù)頁面滾動，當(dāng)圖片進(jìn)入視野，就開始加載，否則不加載任何圖片。

//頁面加載完成時先調(diào)用一下，首屏內(nèi)的圖片。
loadImg();
document.addEventListener("scroll", function(e) {
    //跟著滾動，繼續(xù)加載剩下的圖片
    loadImg()
})

function loadImg(){
     //slice可以將類數(shù)組轉(zhuǎn)化成數(shù)組對象
    [].slice.call(document.querySelectorAll("[data-src]")).forEach(function(item) {
        // 判斷元素是否已經(jīng)進(jìn)入視野
        if (item.getBoundingClientRect().y<=innerHeight) {
            //設(shè)置src
            item.src = item.getAttribute("data-src");
            //刪除data-src屬性，可以減少querySelectorAll的查詢次數(shù)
            item.removeAttribute("data-src");
        }
    })
}

代碼簡單，卻很通用，很實用。方便擴(kuò)展

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/106325.html

相關(guān)文章

前端進(jìn)階（14） - 如何提升前端性能和響應(yīng)速度

摘要：一般建議文件最大不超過。按需加載可以減小首屏加載文件的體積，達(dá)到提高響應(yīng)速度的目的。如果你的項目不需要處理靜態(tài)資源如圖片，也不需要按需加載，并追求前端高性能的話，可以嘗試。如何提升前端性能和響應(yīng)速度下面大多是從前端工程化的角度給出的優(yōu)化建議，如果需要了解語法上的優(yōu)化，可以參考：如何提高頁面加載速度編寫高效的JavaScript Web前端性能優(yōu)化進(jìn)階 - 完結(jié)篇 1. 原生...

lylwyy2016 2019-08-29 17:04 評論0 收藏0
前端進(jìn)階（14） - 如何提升前端性能和響應(yīng)速度

摘要：一般建議文件最大不超過。按需加載可以減小首屏加載文件的體積，達(dá)到提高響應(yīng)速度的目的。如果你的項目不需要處理靜態(tài)資源如圖片，也不需要按需加載，并追求前端高性能的話，可以嘗試。如何提升前端性能和響應(yīng)速度下面大多是從前端工程化的角度給出的優(yōu)化建議，如果需要了解語法上的優(yōu)化，可以參考：如何提高頁面加載速度編寫高效的JavaScript Web前端性能優(yōu)化進(jìn)階 - 完結(jié)篇 1. 原生...

Airy 2019-08-23 12:30 評論0 收藏0
切圖崽的自我修養(yǎng)－優(yōu)化圖片加載流程

摘要：前言優(yōu)化又是優(yōu)化切圖崽們作為整個應(yīng)用的紐帶，連接著用戶行為和機(jī)器性能而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項目開發(fā)中常見的圖片加載優(yōu)化方式預(yù)加載遮罩大法我們經(jīng)常用中實際上前言優(yōu)化！又是優(yōu)化！切圖崽們作為整個web應(yīng)用的紐帶，連接著用戶行為和機(jī)器性能. 而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點. ...

ygyooo 2019-08-29 10:57 評論0 收藏0
切圖崽的自我修養(yǎng)－優(yōu)化圖片加載流程

摘要：前言優(yōu)化又是優(yōu)化切圖崽們作為整個應(yīng)用的紐帶，連接著用戶行為和機(jī)器性能而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項目開發(fā)中常見的圖片加載優(yōu)化方式預(yù)加載遮罩大法我們經(jīng)常用中實際上前言優(yōu)化！又是優(yōu)化！切圖崽們作為整個web應(yīng)用的紐帶，連接著用戶行為和機(jī)器性能. 而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點. ...

AaronYuan 2019-08-19 18:44 評論0 收藏0
切圖崽的自我修養(yǎng)－優(yōu)化圖片加載流程

摘要：前言優(yōu)化又是優(yōu)化切圖崽們作為整個應(yīng)用的紐帶，連接著用戶行為和機(jī)器性能而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項目開發(fā)中常見的圖片加載優(yōu)化方式預(yù)加載遮罩大法我們經(jīng)常用中實際上前言優(yōu)化！又是優(yōu)化！切圖崽們作為整個web應(yīng)用的紐帶，連接著用戶行為和機(jī)器性能. 而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點. ...

xiaochao 2019-08-01 15:26 評論0 收藏0