實驗介紹

我們在瀏覽圖片較多的網(wǎng)頁時，有沒有想過這些圖片是如何成功展示的呢？比如像這樣的圖片素材網(wǎng)站：

這樣的網(wǎng)頁擁有成千上萬的圖片資源，如何優(yōu)化網(wǎng)頁性能成為了開發(fā)人員不得不思考的技術(shù)問題。

不難發(fā)現(xiàn)，每當(dāng)我們下拉網(wǎng)頁的滾動條到底部時，可視部分的圖片資源才開始解析，如此一來能夠大大的減少服務(wù)器的壓力，優(yōu)化網(wǎng)頁性能的同時也能提升用戶體驗。這樣的技術(shù)也就是本實驗想為大家介紹的——圖片懶加載。

在開始學(xué)習(xí)圖片懶加載之前，課程先會介紹圖片預(yù)加載技術(shù)，通過這兩種技術(shù)的學(xué)習(xí)做出對比，更能體現(xiàn)出懶加載是如何有效的提升頁面性能的。本實驗是基于 JQuery 編程語言來實現(xiàn)的，所以學(xué)員需要在實驗開始前學(xué)習(xí) JQuery 的基礎(chǔ)知識。

知識點

• 不對加載資源做處理的圖片相冊
• 圖片加載之預(yù)加載技術(shù)
• 預(yù)加載原理
• 使用 JQuery 完成圖片預(yù)加載
• 圖片加載之懶加載技術(shù)
• 懶加載原理
• 使用 JQuery 完成圖片懶加載

圖片加載

網(wǎng)頁中豐富的圖片資源帶給用戶更好體驗的同時，也降低了我們的性能，減慢了加載速度。如果不對圖片資源做任何處理，就會出現(xiàn)當(dāng)前的圖片已經(jīng)加載完，但是滑到下一張時圖片未加載完成，呈現(xiàn)一種假死的狀態(tài)，用戶體驗很不友好。

常用到的加載方式，分為兩種：預(yù)加載和懶加載。

預(yù)加載

預(yù)加載是另一個性能優(yōu)化技術(shù)，我們可以使用該技術(shù)來預(yù)先告知瀏覽器某些資源可能在將來會被使用到。預(yù)加載簡單來說就是將所有所需的資源提前請求加載到本地，這樣后面在需要用到時就直接從緩存取資源。

為什么要使用預(yù)加載

在網(wǎng)頁全部加載之前，對一些主要內(nèi)容進行加載，以提供給用戶更好的體驗，減少等待的時間。否則，如果一個頁面的內(nèi)容過于龐大，沒有使用預(yù)加載技術(shù)的頁面就會長時間的展現(xiàn)為一片空白或沒有變化，直到所有內(nèi)容加載完畢。

使用預(yù)加載解決之前的問題

之前的圖片相冊我們并未對圖片資源進行任何性能優(yōu)化，導(dǎo)致出現(xiàn)當(dāng)前的圖片已經(jīng)加載完，但是滑到下一張時呈現(xiàn)一種假死狀態(tài)的問題，用戶體驗很不友好。

解決辦法：讓圖片相冊快速無縫隙的展示，在等待過程中顯示正在加載的文字或者圖片，等所有資源加載完成后再一次性展示。

預(yù)加載預(yù)覽效果

懶加載

懶加載也叫延遲加載，指的是在長網(wǎng)頁中延遲加載圖像，是一種很好優(yōu)化網(wǎng)頁性能的方式。用戶滾動到它們之前，可視區(qū)域外的圖像不會加載。這與圖像預(yù)加載相反，在長網(wǎng)頁上使用延遲加載將使網(wǎng)頁加載更快。在某些情況下，它還可以幫助減少服務(wù)器負(fù)載。常適用圖片很多，頁面很長的電商網(wǎng)站場景中。

為什么使用懶加載

1.提升用戶體驗
不妨設(shè)想下，用戶打開像淘寶這樣的長頁面的時候，如果頁面上所有的圖片都使用預(yù)加載，因為圖片數(shù)目較大而導(dǎo)致等待時間很長，用戶難免會心生抱怨，這就嚴(yán)重影響用戶體驗。

2.減少無效資源的加載
如果我們只加載自己所看到的部分，這樣能明顯減少了服務(wù)器的壓力，也能夠減小瀏覽器的負(fù)擔(dān)。

3.防止并發(fā)加載的資源過多會阻塞 js 的加載
過多的資源加載會阻塞 JS 的加載以至于影響網(wǎng)站正常使用。

懶加載預(yù)覽效果

在實驗樓的新課《JQuery 實現(xiàn)網(wǎng)頁圖片懶加載》中，作者使用 JGquery 編程語言，分別實現(xiàn)了①完成圖片相冊、②圖片預(yù)加載、③圖片懶加載，感興趣的話，就快點擊課程開始學(xué)習(xí)吧！

總結(jié)

以上是生活随笔為你收集整理的图片太多加载过慢？学学图片懒加载吧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。