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

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

是否有一种使用jQuery的方法可以在站点加载时缓存每个图像，这样每个页面都不会花费10-12秒来加载？如果没有，读过这篇文章的人有没有更好的想法？现在，当每个页面加载时，它首先加载您在右侧看到的缩略图，然后加载屏幕中心的较大图像

谢谢你的帮助

• 埃文

是否有一种使用jQuery的方法可以将每个图像缓存为 该网站加载，使每个页面不需要10-12秒加载

缓存由HTTP头控制（您当然应该设置），但不管缓存如何，如果您以120KB的速度加载数百个图像，则初始加载时间将非常长

预加载可以通过一点JavaScript（jQuery或非jQuery）完成，但您可能不应该预加载数百个图像（如果一个站点在后台默默地占用了我所有的带宽，我会很不高兴）

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

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

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

夫妇杂项。注:

• 是一个性能分析的好网站

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

---

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

您可以在JavaScript中使用，并将它们预加载到浏览器缓存中，如果这是您想要的：

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];
}

var images=Array（）；
图像[0]='…1.jpg'；
图片[1]='…2.jpg'；
图片[2]='…3.jpg'；
var img=新图像（）；
对于（var i=0；i

我想我会把这个作为答案，因为你喜欢我的惰性加载评论

---

尝试使用。

图像是855px x 570px-您有更好的想法吗？他们一开始只有15兆。哇，我放弃了等待你的页面加载。那太疯狂了……告诉我吧！我在这里急需帮助！你认为像jQuery Lazy Load Plugin（）这样的东西会起作用吗？你当时只显示了几个缩略图和一个图像。不要加载未显示的图像，仅在用户交互时加载它们，并在等待时使用微调器/加载器。肯定比等一分钟你的网站加载好吗？同意。我认为这个想法是根据请求加载图像。加载尽可能多的小缩略图，但只加载要求的较大图像。好的，我明白了。我会弄明白到底该怎么做——也许插件就是一条出路？@Evan——这是一个非常简单的布局。单击缩略图并加载它。即使没有延迟加载/预加载，它也可能工作得很好；通过延迟加载，它将非常平滑。如果你不熟悉如何自己编写一个插件，它会很好用。好吧，我喜欢这个插件的想法。我会把这个标记为正确的，但是如果我遇到一个问题，我能留下一个问题吗？@Evan-当然。如果问题与原来的主题不同，请随意提出新问题。