一次加载所有内容（图片）以提高网站性能(Loading all content (images) a

我最近做了一些网站分析我的网站上发现，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和浏览器的缓存预加载它们，如果这就是你以后在做什么：

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

文章来源: Loading all content (images) at once to increase site performance