圖片的可以為頁面帶來更好的展示效果，同時也能向用戶傳達更豐富的信息。在頁面上展示圖片時有兩類典型問題：

1. 圖片最初是隱藏的，但在需要顯示時應能立即顯示出來（如輪播圖、相冊展示、幻燈片）
2. 網頁很長，而且網頁上有大量的圖片（如電商網站中的商品列表），但這些圖片未必用戶都會看到，如果用戶根本就不滾動頁面來查看這些圖片，那這些圖片的加載就會成為一種浪費。

解決這兩類問題就需要使用圖片預加載和懶加載技術。

圖片預加載是在圖片顯示之前就讓瀏覽器加載這個圖片，這樣當瀏覽器真正需要顯示這個圖片時就能瞬間將它顯示出來，不需要再去下載和解碼。圖片預加載通常使用Image對象將圖片載入內存。Image對象實際上就是一個<img>標簽，只不過沒有append到頁面上而已。

圖片懶加載則是讓網頁下部分的圖片都先顯示同一個loading圖片，當頁面向下滾動，這些圖片露出來時，才將img標簽的src改為正確的圖片地址，這時瀏覽器才去下載圖片並解碼顯示到頁面上。圖片懶加載的關鍵是監視頁面的滾動及窗口大小變量並計算圖片是否處於窗口工作區內（即用戶能看到）。有很多圖片懶加載插件或獨立腳本，如：

jQuery.lazyload.js

echo.js

圖片預加載和懶加載