圖像加載性能

Question

我正在使用Wordpress和大量圖像的網站上工作。這些圖像的分辨率爲1000像素到800像素[W×H]，需要手動縮小到輸入頁面的大小。 大拇指的大小約爲12KB。對於入口頁面，有45個圖像需要加載。

我的問題是：以最佳性能加載這些圖像的最佳方法是什麼？應該用jQuery來實現，在網站啓動後加載圖像？或者你更喜歡其他解決方案？

所有圖片均爲簡單的HTML標記：

<img src="image.jpg" width="200" height="150" alt="" class="thumb" /> 

Answer 1

使用延遲加載插件：

它的圖像延遲加載在長網頁。 視口以外的圖像（網頁的可見部分）不會在用戶滾動 之前加載。

Reference

Answer 2

對我來說它就像讓每個圖像的兩個圖像，一個與實際尺寸，第二個是用縮略圖，顯示所有頁面加載後的縮略圖與​​事件，使所有的圖像看起來完全沒有任何衝突，並在任何事件顯示真實圖像..

Answer 3

您還可以使用HTML5清單文件來緩存所有的CSS，JS和圖像，以加快瀏覽。