一次加载所有内容（图像）以提高网站性能 [英] Loading all content (images) at once to increase site performance

问题描述

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

I recently did some website analysis On My Site to find that 90% of my site's loading time is coming from the 100's of images I have on the site. I have already cropped and compressed all images so that they are around 120kb in size (each).

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

Is there a way using jQuery perhaps that I could cache each image as the site loads so that each page doesn't take 10 - 12 seconds to load? If not, does anyone reading this have any better ideas? As of now, when each page loads it first loads the thumbnail images you see on the right hand side, and it will then load the larger images in the center of the screen.

我感谢任何帮助！

• Evan

推荐答案

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

Is there a way using jQuery perhaps that I could cache each image as the site loads so that each page doesn't take 10 - 12 seconds to load?

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

Caching is controlled with HTTP headers (which you should certainly be setting) but regardless of caching the initial load time will be way too high if you are loading hundreds of images at 120KB each.

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

Preloading can be accomplished with a little JavaScript (jQuery or not) but you probably shouldn't be preloading hundreds of images (I would be unhappy if a site silently ate up all my bandwidth in the background).

我建议LOADI按需提供全尺寸图像（例如用户点击缩略图）和/或延迟加载图片（例如，只有在滚动到视图中时加载它们）。

I suggest either loading the full-size images on demand (e.g. user clicks on a thumbnail) and/or lazy loading images (e.g. only loading them when they are scrolled into view).

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

Given the layout of your site, I would:

• 加载第一个可见图像


• 为每个可见缩略图预加载图像


• 每当用户点击向下箭头时，预加载一些图像。

夫妻混合。注：

• http： //gtmetrix.com/ 是一个很棒的性能分析网站。

• http://gtmetrix.com/ is a great site for performance analysis.

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

Your layout is a little confusing on really wide monitors. On my 2500x1600 display, the arrows which control the thumbnails are several hundred pixels away which makes them hard to notice.

这篇关于一次加载所有内容（图像）以提高网站性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！