文章目錄

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

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

---

前言

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

一、懶加載是什么？

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

二、懶加載的特點。

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

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

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

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

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

五、懶加載結果展示。

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

總結

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

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

網(wǎng)站名稱：JavaScript實現(xiàn)懶加載-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://chinadenli.net/article16/gejgg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站導航、面包屑導航、搜索引擎優(yōu)化、網(wǎng)站排名、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)