预加载 20MB 以上的图片。值得尝试吗？ [关闭]

Posted 2023-05-07

【中文标题】预加载 20MB 以上的图片。值得尝试吗？ [关闭]

【英文标题】：Preloading 20MB+ of images. Is it worth it to attempt this? [closed]

【发布时间】：2011-10-16 01:46:30

【问题描述】：

我正在开发一个摄影作品集网站。我想知道从数据库下载图像的最佳做法是什么。截至目前，整个画廊大约有 20MB。画廊仍在开发中，我打算在照片之间运行“加载”图形。但客户似乎更喜欢图像预加载。让页面预加载 20MB 以上的照片是否可行，如果可以，最好的方法是什么？还是最好配合载入画面？

【问题讨论】：

“或者最好还是配合加载界面？”？这是什么意思？

如果您的客户想要预加载，我会说加载屏幕是个好主意，而不是让浏览器在后台预加载时挂起。

@Kragen 给出了一个很好的理由说明为什么你不应该这样做，尽管如果你的客户坚持，并且你不能改变他们的想法，那么你应该放置一个免责声明，也许在飞溅上页面，通知所有访问者访问该站点将花费他们 20MB 的信用。我曾经自己使用移动连接，并积极避免使用具有自动播放视频、音乐和缓冲图像缓存的页面和网站。

【参考方案1】：

一次性获取 20MB 太多了，这将导致缓慢且烦人的用户体验。您可能应该依次对每个图像进行 ajax 加载。

顺便问一下，你的图片有多大？ 800 x 600 jpeg 在 90 - 95% 的质量下应该在 50k 左右。所以 20 MB 就是 400 张图片。这对于一页来说似乎很多。我猜你的图像尺寸很大 - 考虑缩小它们。如果您想要提供高分辨率、非压缩版本，请将这些单独链接。

编辑：仅供参考，我认为一个非常大的页面（html doc + 所有 css、js 和图像资产）约为 1MB。 “平均”大小的页面可能约为 100k。

【讨论】：

这可以解释一些事情。他发给我的图片是 800x600，但是 200-700kb。我对它们进行了压缩，这大大减小了尺寸。

【参考方案2】：

为什么不通过一些服务器端脚本“缩略图”图像，预加载缩略图并在缩略图点击时显示完整图像（使用某种灯箱 js） 这将减少大量预加载时间，同时保持完整的投资组合预览。

【参考方案3】：

我认为更好的方法是在您查看当前照片时预加载接下来的几张照片

【参考方案4】：

是的，绝对不要这样做。请记住，一些用户将使用移动连接进行连接，其中一些用户按兆字节付费 - 如果您这样做，那么您将用掉他们可能永远看不到的图像的 20 MB 配额。

【参考方案5】：

我认为这两种解决方案都不实用 - 我建议您缩小图像。

【参考方案6】：

20MB 可能太多了，除非它是一个专门的应用程序，您确信 1) 用户会等待，并且 2) 他们会查看大部分图像。否则，您就是在浪费带宽。

我会研究一种策略，将您的图像缓存在服务器内存中，以避免数据库流量与客户端预缓存一些您可以添加的图像相结合。例如，如果用户在图像“A”上，则同时加载“B”和“C”。