簡(jiǎn)單高效實(shí)現(xiàn)一個(gè)按需加載圖片的邏輯。

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

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

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

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

function loadImg(){
     //slice可以將類數(shù)組轉(zhuǎn)化成數(shù)組對(duì)象
    [].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");
        }
    })
}

代碼簡(jiǎn)單，卻很通用，很實(shí)用。方便擴(kuò)展

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106325.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

xiaochao 2019-08-01 15:26 評(píng)論0 收藏0