一次加载所有内容（图像）以提高网站性能

Question

我最近做了一些网站分析On My Site，发现我网站90％的加载时间来自我在网站上的100张图片。我已经裁剪并压缩了所有图像，因此它们的大小约为120kb（每个）。

有没有办法使用jQuery，或许我可以在网站加载时缓存每个图像，这样每个页面都不需要10-12秒加载？如果没有，是否有人阅读这个有更好的想法？截至目前，当每个页面加载它时，首先加载您在右侧看到的缩略图图像，然后将更大的图像加载到屏幕的中心。

我感谢任何帮助！

• 埃文

Answer 1

  

有没有办法使用jQuery或许可以将每个图像缓存为   网站加载，以便每个页面加载不需要10 - 12秒？

缓存由HTTP标头控制（您当然应该设置）但是无论缓存如何，如果以每个120KB的速度加载数百个图像，初始加载时间将会过高。

预加载可以通过一些JavaScript（jQuery或不是jQuery）完成，但你可能不应该预加载数百个图像（如果一个网站默默地占用了我的所有带宽，我会很高兴。背景）。

我建议您根据需要加载全尺寸图片（例如，用户点击缩略图）和/或延迟加载图片（例如，只有在滚动到视图中时加载图片）。

考虑到您网站的布局，我会：

• 加载第一张可见图片
• 为每个可见缩略图预加载图像
• 每当用户点击“向下”箭头时，预先加载一些图像。

夫妻混蛋。注意到：

• http://gtmetrix.com/是一个很棒的效果分析网站。

• 您的布局在真正宽的显示器上有点混乱。在我的2500x1600显示屏上，控制缩略图的箭头距离数百个像素，这使得它们很难被注意到。

Answer 2

我想把它作为一个答案，因为你喜欢我的懒惰加载评论。

尝试使用Lazy Load Plugin for jQuery。

Answer 3

这让人想起90年代和“悬停”的图像......

您可以在JavaScript中使用Image并将其预先加载到浏览器缓存中，如果这就是您所追求的目标：

var i = new Image();
i.src = "/path.to/image.jpg";

或者，对于集合：

var images = Array();
images[0] = '...1.jpg';
images[1] = '...2.jpg';
images[2] = '...3.jpg';

var img = new Image();
for (var i = 0; i < images.length; i++){
  img.src = images[i];
}