Performance 您将如何优化/模拟'；随机'；加载大型图像文件？

我们使用大背景图像（高分辨率照片，高达700 KB）进行页面设计。 当你四处浏览时，你会看到不同的图片，这是网站体验的一部分

目前，每个页面请求上都会加载一个不同的（随机）图像，来自大约15个图像池，这些图像可能会随着时间的推移而增长

我正在寻找一种合理的方法来优化这一点：

为了避免用户必须在每个页面视图上下载一个大图像文件

为了减少服务器上的负载（这是一个问题，服务器会将图像保留在内存中吗？）

到目前为止，我的想法包括：

• 以设定的间隔加载不同图像的计时器
• 使用ajax在后台逐步加载其他图像
• 将图像与特定内容（页面、标记）关联

---

问题是，如何在最小化页面加载时间和服务器命中率的同时，让它看起来有点随机？

我通常避免使用具有巨大图像的站点，我非常不耐烦。我会重新考虑您的设计。

作为第一步，您应该确保可以正确缓存图像：

• 使用健全的URL（无会话id等）
• 设置适当的http头

---

首先，听说仅背景图像就有700kb让我大吃一惊。除了屏幕上的内容…这是一个相当沉重的网站

首先，我会尝试使用图像压缩工具。我想到了两个工具Imagemagick和PNGCrush。PNGCrush在减少附加到照片的所有无关元数据方面非常出色，而且不会影响照片质量

我只建议这样做，因为压缩图像将有助于用户下载更少的内容，这意味着更快的加载时间，这是用户想要的

我还将缓存图像，这样当用户重新访问站点时，图像已经缓存在他们的端部。这将最小化用户每次访问您的站点时发出的HTTP请求。 商业网站www.reactive.com就是这种技术的一个例子。如果查看/js/headerImages.js文件，它们将使用图像缓存。有趣的是，您将在以下位置找到相同的src代码：

考虑到您提到的图像是随机加载的，我假设您使用jQuery之类的Javascript库来创建效果。 如果是，可以通过使用CDN而不是引用存储在服务器上的jQuery库的本地副本来最小化页面加载时间。我在为客户制作的网站上进行了性能测试，平均点击次数超过20次，通过这种技术节省了1.6秒

---

希望现在能有所帮助：）

建议您尝试优化图像的大小…700K太大了。大多数图像都在100KB范围内，只有少数是大的。不用担心，这是一个用于业务数据库的CRUD接口…用户将别无选择。如果是内部站点（内部LAN），图像应立即加载。如果是这样的话，我就不用担心预加载了。设计是不可协商的，它不是CRUD接口！？我有过这样的经验，加载外部脚本会减慢页面等待服务器响应的速度，不过我想这取决于它的宿主位置