Предварительная загрузка изображений в массив (и ожидание их загрузки)

Question

Поэтому я столкнулся с другой проблемой.

Когда я начал переделывать веб-страницу, над которой я работаю, я натолкнулся на мысль - почему бы не сделать так, чтобы на странице предварительно загружались материалы, и пока она делает это, покажите экран загрузки? Ну, я сделал для этого функцию, но дело в том, что она начинает делать то, что должна, пока не доходит до части open() предварительной загрузки изображения. Это просто не работает. Это потому, что я даю ему аргументы [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;

Answer 1

Вот гораздо, гораздо более простой способ предварительно загрузить изображения и заставить его вызывать обратный вызов, когда изображения завершаются загрузкой в ​​соответствующем предыдущем вопросе / ответе: JavaScript preloader для изображений, который поддерживает события.