實驗介紹
我們在瀏覽圖片較多的網頁時，有沒有想過這些圖片是如何成功展示的呢？比如像這樣的圖片素材網站：
這樣的網頁擁有成千上萬的圖片資源，如何優化網頁性能成爲了開發人員不得不思考的技術問題。
不難發現，每當我們下拉網頁的滾動條到底部時，可視部分的圖片資源纔開始解析，如此一來能夠大大的減少服務器的壓力，優化網頁性能的同時也能提升用戶體驗。這樣的技術也就是本實驗想爲大家介紹的——圖片懶加載。
在開始學習圖片懶加載之前，課程先會介紹圖片預加載技術，通過這兩種技術的學習做出對比，更能體現出懶加載是如何有效的提升頁面性能的。本實驗是基於 JQuery 編程語言來實現的，所以學員需要在實驗開始前學習 JQuery 的基礎知識。
知識點
- 不對加載資源做處理的圖片相冊
- 圖片加載之預加載技術
- 預加載原理
- 使用 JQuery 完成圖片預加載
- 圖片加載之懶加載技術
- 懶加載原理
- 使用 JQuery 完成圖片懶加載
圖片加載
網頁中豐富的圖片資源帶給用戶更好體驗的同時，也降低了我們的性能，減慢了加載速度。如果不對圖片資源做任何處理，就會出現當前的圖片已經加載完，但是滑到下一張時圖片未加載完成，呈現一種假死的狀態，用戶體驗很不友好。
常用到的加載方式，分爲兩種：預加載和懶加載。
預加載
預加載是另一個性能優化技術，我們可以使用該技術來預先告知瀏覽器某些資源可能在將來會被使用到。預加載簡單來說就是將所有所需的資源提前請求加載到本地，這樣後面在需要用到時就直接從緩存取資源。
爲什麼要使用預加載
在網頁全部加載之前，對一些主要內容進行加載，以提供給用戶更好的體驗，減少等待的時間。否則，如果一個頁面的內容過於龐大，沒有使用預加載技術的頁面就會長時間的展現爲一片空白或沒有變化，直到所有內容加載完畢。
使用預加載解決之前的問題
之前的圖片相冊我們並未對圖片資源進行任何性能優化，導致出現當前的圖片已經加載完，但是滑到下一張時呈現一種假死狀態的問題，用戶體驗很不友好。
解決辦法：讓圖片相冊快速無縫隙的展示，在等待過程中顯示正在加載的文字或者圖片，等所有資源加載完成後再一次性展示。
預加載預覽效果
懶加載
懶加載也叫延遲加載，指的是在長網頁中延遲加載圖像，是一種很好優化網頁性能的方式。用戶滾動到它們之前，可視區域外的圖像不會加載。這與圖像預加載相反，在長網頁上使用延遲加載將使網頁加載更快。在某些情況下，它還可以幫助減少服務器負載。常適用圖片很多，頁面很長的電商網站場景中。
爲什麼使用懶加載
1.提升用戶體驗
不妨設想下，用戶打開像淘寶這樣的長頁面的時候，如果頁面上所有的圖片都使用預加載，因爲圖片數目較大而導致等待時間很長，用戶難免會心生抱怨，這就嚴重影響用戶體驗。
2.減少無效資源的加載
如果我們只加載自己所看到的部分，這樣能明顯減少了服務器的壓力，也能夠減小瀏覽器的負擔。
3.防止併發加載的資源過多會阻塞 js 的加載
過多的資源加載會阻塞 JS 的加載以至於影響網站正常使用。
懶加載預覽效果
在實驗樓的新課《JQuery 實現網頁圖片懶加載》中，作者使用 JGquery 編程語言，分別實現了①完成圖片相冊、②圖片預加載、③圖片懶加載，感興趣的話，就快點擊課程開始學習吧！