您将如何优化/模拟大型图像文件的“随机”加载？

Question

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

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

我正在寻找一种理智的方法来优化它：

1. 避免用户必须在每个页面视图
上下载大图像文件
2. 为了减少服务器上的负载（这是一个问题，服务器会将图像保留在内存中吗？）

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

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

问题是，如何让它感觉有点随机，同时最小化页面加载时间和服务器命中？

Answer 1

我通常会避开带有巨大图像的网站，我很不耐烦。我会重新考虑你的设计。

Answer 2

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

• 使用健全的网址（没有会话ID等）
• 设置适当的http标头ETag

Answer 3

首先，听说单独的背景图像是700kb令我震惊。除了内容ON屏幕......这是一个非常重的网站。

对于初学者，我会尝试使用图像压缩工具。 Imagemagick和PNGCrush让人联想到两个工具。 PNGCrush非常适合减少附加到照片的所有无关元数据，而不会影响照片质量。

我只建议这样做，因为压缩图像将帮助您使用户能够下载更少量的内容，这意味着更快的加载时间，...在一天结束时...是用户想要的。

我还会缓存图片，这样当用户重新访问网站时，图片已经缓存在他们的结尾。这可以最大限度地减少用户每次访问您的网站时发出的HTTP请求。 在商业网站上使用此技术的示例是www.reactive.com。如果查看/js/headerImages.js文件，它们会使用图像缓存。有趣的是，您可以在http://javascript.internet.com/miscellaneous/random-image.html

找到相同的src代码

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

希望现在有所帮助：）