预加载大量图像

Posted 2023-05-07

【中文标题】预加载大量图像

【英文标题】：Preloading huge amount of images

【发布时间】：2011-06-15 02:55:05

【问题描述】：

我正在尝试使用以下链接中实现的逻辑并行预加载图像。

http://blog.lieldulev.com/2010/05/21/parallel-image-preloading-in-js/

我有大量图片，目前有 350 多张图片，每张平均文件大小为 50KB，我尝试预加载的图片总数为 20MB。我需要画布绘制的图像。

使用上述并行下载逻辑，我遇到了浏览器等待 2 分钟完成加载整个页面的问题。有时，它会停止脚本。

顺便说一句，目前 20MB 的图像是保守的图像数量。我需要预加载的一组图像高达 80MB！

预加载这么多图片是否可行？如果我需要预加载，我的要求的最佳方法是什么？我应该做非并行吗？部分预加载怎么样？

提前谢谢你 马夫

【参考方案1】：

这是 MXHR（多部分 XHR）请求的完美用例。这意味着，服务器脚本正在读取您的图像文件，将它们解码为 base64 字符串并将这些图像流式传输到浏览器。 supplyJS^help 正在使用这种技术，但目前仅用于 javascript 和样式表文件。无论如何，它的设计非常模块化，为您需要的任何图像类型扩展它的功能应该没有问题。

如果您没有心情自己动手，请不要担心 - 我会在接下来的几天更新图片加载脚本。

【讨论】：

我很期待那个脚本 :) 但现在我可能需要一个快速解决方案来解决我的问题。谢谢

非常好的来源。如果您有时间，您能否就如何修改以适用于这种情况给出几个要点？

@mVChr：它基本上只是从现有代码中复制和粘贴。添加一个新的 MIME 类型侦听器，比如说image/png，并对接收到的每个图像执行一些操作。请注意尽快更新。

@jAndy “通过一个请求交付 Javascript-、Stylesheet- 和 Image- 文件...”这很快，很棒，谢谢！

@jAndy 感谢脚本！也希望有一个 php 版本的 Mxhr 库！对不起，如果问得太多了:) 谢谢