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 es 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;

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 es 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;

• javascript
• arrays
• preloading

• You don't need to do a proper AJAX request to preload images; you can just make a new Image(), set its src, and wait for window.onLoad. – Waleed Khan Commented Jul 18, 2012 at 18:59
• If you simply want to wait for all assets to be loaded, show your loading message, and listen to the window.onload event. This event is fired when everything is loaded, including images. – Yoshi Commented Jul 18, 2012 at 19:00
• @arxanas and Yoshi :I already have a window.onload at the very beginning of my code - if I do another window.onload somewhere in the mainPageLoad function, is it going to ignore it, or is it going to act like it never quite loaded yet? – Ivan Kay Commented Jul 18, 2012 at 19:20
• If you use addEventListener, they will both trigger. – Waleed Khan Commented Jul 18, 2012 at 19:21
• 1 Since you're relatively new here, I thought I'd explain that on Stackoverflow, you are not supposed to edit your question with the solution. Your question is supposed to be the question. The answer is indicated by the accepted answer. As you've now edited your question, it doesn't read like the original question you had that others can e across at some later time. There are times when it might be useful to add some context for how you used the accepted answer, but IMO that should go at the end of your question so that the start of your question still reads like your question. – jfriend00 Commented Jul 18, 2012 at 19:35

1 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.