预加载图像以播放动画

Question

我必须预加载大约 900 图像，以根据用户选择播放所需的动画。但在此之前，我必须检查，我必须预加载哪些图像。我有大约 5400 图片，我使用 ffmpeg 从视频中提取这些图片。根据用户选择，我必须预加载所需的图像。我还显示了预加载的百分比已经完成。

以下是我用于根据用户选择预加载900图像的代码。

function preloadImages(ImagesURL, callback) {
    var img_i;
    var img_j;
    var loaded = 0;
    for (img_i = 0, img_j = ImagesURL.length; img_i < img_j; img_i++) {
        (function (img, src) {
            img.onload = function () {
                updateProgress(); // to show how much is completed
                if (++loaded == ImagesURL.length && callback) {
                    callback();
                }
            };
            img.onerror = function () {
                showCustomMessage("Error occurred while loading files, please refresh the page and try again.");
            };
            img.onabort = function () {};
            img.src = src;
        } (new Image(), ImagesURL[img_i]));
    }
}

现在我想知道除此之外还有更好的方法吗？或者我应该使用AJAX而不是那个，因为这个功能在桌面上运行得非常好，但同样的方法是在iPad或手持设备上运行时占用大量资源。