预加载大量图像
我正在尝试使用以下链接上实现的逻辑来并行预加载图像。
http://blog.lieldulev.com/2010/ 05/21/parallel-image-preloading-in-js/
我有大量图像，目前有 350 多个图像，每个图像平均文件大小为 50KB，我尝试总计 20MB 的图像预载。我需要画布绘图的图像。
使用上述并行下载逻辑，我遇到了浏览器等待 2 分钟才能完成整个页面加载的问题。有时，它会停止脚本。
顺便说一句，20MB 的图像是目前保守的图像量。我需要预加载一些图像集，大小高达 80MB！
预加载如此大量的图像是否实用？如果我需要预加载，满足我的要求的最佳方法是什么？我应该做非平行吗？部分预载怎么样？
先感谢您 马夫
I'm trying to do a parallel preload of images using the logic implemented on the below link.
http://blog.lieldulev.com/2010/05/21/parallel-image-preloading-in-js/
I have a huge amount of images, currently 350+ images with an average of 50KB file size each, amounting to a total of 20MB of images im trying to preload. I need the images for canvas drawing.
Using the above logic of parallel downloading, I'm having issues of the browser waiting for 2mins to finish loading the whole page. sometimes, it stops the script.
By the way, 20MB of images is currently the conservative amount of images. some set of images I need to preload my go to as much as 80MB!!
Is it even practical to preload such an amount of images? And if i need to preload, What is the best approach to my requirement? Should i do non-parallel? How about partial preload?
Thank you in advance
Marv
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是 MXHR（多部分 XHR）请求的完美用例。这意味着，服务器脚本正在读取您的图像文件，将它们解码为 base64 字符串并将这些图像流式传输到浏览器。
supplyJShelp正在使用这种技术，但目前仅适用于 javascript 和样式表文件。不管怎样，它的设计非常模块化，将其功能扩展到您需要的任何图像类型应该没有问题。如果您没有心情自己动手，请不要担心 - 我将在接下来的几天内更新图像加载脚本。
That is a perfect usecase for a MXHR (Multipart XHR) request. That means, a serverscript is reading your image files, decodes them as base64 string and streams those images to the browser.
supplyJShelp is using this technique, but currently only for javascript & stylesheet files. Anyway, it's designed pretty modular, it should be no problem to extend it's functionality for any image type you need.If you don't feel in the mood to do it yourself, don't worry - I'll update the script for image loading the next few days.