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

Question

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

有没有一种使用 jQuery 的方法，也许我可以在网站加载时缓存每个图像，这样每个页面就不需要 10 - 12 秒的时间来加载？如果没有，阅读本文的人是否有更好的想法？到目前为止，当每个页面加载时，它首先会加载您在右侧看到的缩略图，然后会在屏幕中央加载较大的图像。

我很感激任何帮助！

• 埃文

Answer 1

有没有一种使用 jQuery 的方法，也许我可以在网站加载时缓存每个图像，这样每个页面就不需要 10 - 12 秒的时间来加载？

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

预加载可以用一点 JavaScript（jQuery 与否）来完成，但你可能不应该预加载数百张图片（如果一个网站在后台默默地占用了我所有的带宽，我会很不高兴）。

我建议要么按需加载全尺寸图像（例如用户点击缩略图）和/或延迟加载图像（例如仅在它们滚动到视图时加载它们）。

鉴于您网站的布局，我会：

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

情侣杂项。笔记：

• http://gtmetrix.com/是一个很好的性能分析站点。

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

Answer 2

以为我会将此作为答案，因为您喜欢我的延迟加载评论。

尝试使用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];
}