在数组中预加载图像（并等待它们下载）答案

【问题标题】：Preloading images in an array (and waiting until they have downloaded)在数组中预加载图像（并等待它们下载）
【发布时间】：2012-07-18 18:57:13
【问题描述】：

所以我遇到了另一个问题。

当我开始重做我正在处理的网页时，我想到了一个想法 - 为什么不让页面预加载材料，而在它这样做的时候，显示一个加载屏幕？好吧，我为此做了一个函数，但问题是，它开始做它应该做的事情，直到图像预加载的 open() 部分。它根本行不通。是因为我给它的 arguments[i] 部分导致它停在那里？有没有更好的方法？

function mainPageLoad() {
    var loadScreen = document.getElementById('pageload');
    loadScreen.innerHTML = "<p>Loading<span id='loadingWhat'>...</span></p><img src='images/loading.gif?v2'>";
    var loadspan = document.getElementById('loadingWhat');
    loadspan.innerHTML = " images";
    preloadImages(["images/logo.jpg"])
    //loadspan.innerHTML = " content";
    //preloadContent([""]);
}

function preloadImages() {
    var images = new Array();
    var imagesToLoad = arguments.length;
    document.writeln(imagesToLoad);
    var imagesLoaded = 0;
    document.writeln(imagesLoaded);
    for (i = 0; i < arguments.length; i++) {
        document.writeln("Loading images.");
        images[i] = new XMLHttpRequest();
        document.writeln("Made object");
        images[i].open("GET", arguments[i], true);
        document.writeln("Well, that worked.");
        images[i].send(null);
        document.writeln("Sent.");
        images[i].onreadystatechange = function() {
            document.writeln("Ready state change!");
            if (images[i].readystate == 4 && images[i].status == 200){
                imagesLoaded = imagesLoaded + 1;
                window.alertln("We have loaded another image.");
                window.alertln("Image" + String(imagesLoaded) + "out of" + String(imagesToLoad));           
            }
        }
    }
}

window.onload = init;

【问题讨论】：

您无需执行适当的 AJAX 请求即可预加载图像；你可以创建一个new Image()，设置它的src，然后等待window.onLoad。
如果您只是想等待所有资产加载完毕，请显示您的加载消息，并监听window.onload 事件。加载所有内容（包括图像）时会触发此事件。
@arxanas 和 Yoshi：我的代码开头已经有一个 window.onload - 如果我在 mainPageLoad 函数的某处执行另一个 window.onload，它会忽略它，还是它会表现得像从未加载过一样吗？
如果你使用addEventListener，它们都会触发。
由于您在这里相对较新，我想我会在 Stackoverflow 上解释一下，您不应该使用解决方案编辑您的问题。你的问题应该是问题。答案由接受的答案表示。由于您现在已经编辑了您的问题，因此它不像其他人可能会在以后遇到的原始问题那样读起来。有时为您如何使用已接受的答案添加一些上下文可能很有用，但 IMO 应该在您的问题结束时进行，以便您的问题的开头仍然像您的问题一样。

标签： javascript arrays preloading

【解决方案1】：

这是一种更简单的方法来预加载图像并在图像完成加载后调用回调：Image preloader javascript that supports events。

【讨论】：

哦，所以还有一个用于图像的 onLoad！好的，我试试看效果如何。
@Yoshi - 有时很难决定是否称其为 dup。我经常标记重复，但认为这两个问题看起来并不完全相同，即使相同的答案有助于解决它们 - 我猜是判断电话。