图像加载性能

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和图像，以加快浏览。