文章目錄

• 前言
• 一、懶加載是什么？
• 二、懶加載的特點(diǎn)。
• 三、懶加載的實現(xiàn)原理。
• 四、實現(xiàn)懶加載。
• 五、懶加載結(jié)果展示。
• 總結(jié)

成都創(chuàng)新互聯(lián)公司專業(yè)提供達(dá)州托管服務(wù)器服務(wù)，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購買達(dá)州托管服務(wù)器服務(wù)，并享受7*24小時金牌售后服務(wù)。

---

前言

身為開發(fā)人員的我們進(jìn)行項目開發(fā)時，不僅僅要對頁面進(jìn)行設(shè)計，而且還要考慮項目上線后是否能進(jìn)行性能優(yōu)化，從而達(dá)到減輕對服務(wù)器的負(fù)載，讓用戶擁有一個友好的項目體驗感。常見的項目性能優(yōu)化方式有很多。例如：減少HTTP請求，減少DNS查詢，避免重定向，圖片懶加載等。接下來，為大家介紹項目性能優(yōu)化之一 —圖片懶加載。

一、懶加載是什么？

懶加載也叫延遲加載，按需加載。指的是在長網(wǎng)頁中延遲加載圖片數(shù)據(jù)，是一種較好的網(wǎng)頁性能優(yōu)化的方式。在比較長的網(wǎng)頁或應(yīng)用中，如果圖片很多，所有的圖片都被加載出來，而用戶只能看到可視窗口的那一部分圖片數(shù)據(jù)，這樣就浪費(fèi)了性能。
如果使用圖片的懶加載就可以解決以上問題。在滾動屏幕之前，可視化區(qū)域之外的圖片不會進(jìn)行加載，在滾動屏幕時才加載。這樣使得網(wǎng)頁的加載速度更快，減少了服務(wù)器的負(fù)載。懶加載適用于圖片較多，頁面列表較長（長列表）的場景中。
原文鏈接：點(diǎn)擊跳轉(zhuǎn)

二、懶加載的特點(diǎn)。

• 減少無用資源的加載：使用懶加載明顯減少了服務(wù)器的壓力和流量，同時也減小了瀏覽器的負(fù)擔(dān)和服務(wù)器的負(fù)載。
• 提升用戶體驗:如果同時加載較多圖片，可能需要等待的時間較長，這樣影響了用戶體驗，而使用懶加載就能大大的提高用戶體驗。
• 防止加載過多圖片而影響其他資源文件的加載 ：會影響網(wǎng)站應(yīng)用的正常使用。

三、懶加載的實現(xiàn)原理。

• 首先準(zhǔn)備需要的img標(biāo)簽。和圖片(注意：此處包含了未加載時需要展示的圖片)
• 將img標(biāo)簽的src屬性都設(shè)置為未加載時展示圖片的路徑，并設(shè)置對應(yīng)的data-xxx(此處我使用data-src)為真正需要展示圖片的路徑。
• 判斷當(dāng)前圖片是否已經(jīng)進(jìn)入用戶瀏覽器的可視區(qū)域，若未進(jìn)入，則繼續(xù)展示未加載時展示的圖片；如已進(jìn)入，則將data-src中真正的圖片路徑動態(tài)賦值給src屬性，從而將圖片進(jìn)行加載，最后達(dá)到懶加載的功能。

四、實現(xiàn)懶加載。

使用原生JavaScript實現(xiàn)

五、懶加載結(jié)果展示。

可以觀察到只有當(dāng)用戶將圖片滑動至瀏覽器可視區(qū)域，真正的圖片地址才會被請求，從而達(dá)到懶加載的效果(注意： 視頻有背景音樂，請謹(jǐn)慎播放)。

總結(jié)

這是我在做項目時使用到的性能優(yōu)化操作 —圖片懶加載，鑒于自身實力的有限，可能在文章講解中出現(xiàn)錯誤，大家可以私信或評論指出錯誤。創(chuàng)作不易，點(diǎn)個贊唄。同時有任何疑問我們一起交流，一起成長。如果有更好的文章，也歡迎貼在下面哦，我們相互學(xué)習(xí)。

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級服務(wù)器適合批量采購，新人活動首月15元起，快前往官網(wǎng)查看詳情吧

分享文章：JavaScript實現(xiàn)懶加載-創(chuàng)新互聯(lián)
URL標(biāo)題：http://weahome.cn/article/gejgg.html