Question

So I came across another problem.

When I started redoing the webpage I am working on , I came across an idea – Why not have the page preload the materials, and while it’s doing just that, show a loading screen?
Well, I made a function for that, but the thing is, it starts doing what it’s supposed to, until it comes to the open() part of the image preloading. It simply does not work. It is because I am giving it the arguments[i] part that is causing it to stop there? Is there a better way to do it?

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

Here’s a much, much simpler way to preload images and have it call a callback when the images are done loading in a related prior question/answer: Image preloader javascript that supports events.