预加载大量图像 [英] Preloading huge amount of images

问题描述

我正在尝试使用以下链接上实现的逻辑对图像进行并行预加载.

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/

我有大量的图像，目前有350多个图像，每个图像平均50KB，总共20MB的图像正在尝试预加载.我需要用于画布绘制的图像.

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.

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

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.

顺便说一句，目前20MB的图像是保守的图像数量.我需要预加载一些图像集以达到80MB！

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?

预先感谢您Marv

推荐答案

对于MXHR(多部分XHR)请求，这是一个完美的用例.这意味着，服务器脚本正在读取您的图像文件，将它们解码为base64字符串，然后将这些图像流式传输到浏览器. supplyJS ^帮助 正在使用此技术，但目前仅适用于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. supplyJS^help 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.

这篇关于预加载大量图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！