Preloading images in an array (and waiting until they have downloaded)

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;

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, Jul 18 '12 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, Jul 18 '12 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, Jul 18 '12 at 19:20
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 come 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, Jul 18 '12 at 19:35

score 3 · Accepted Answer · edited May 23 '17 at 12:04

3

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.

edited May 23 '17 at 12:04

Community

1
1

answered Jul 18 '12 at 19:00

jfriend00

683,504
96
985
979

Oh, so there is an onLoad for images too! Okay, I will try it and see how it works. – Ivan Kay Jul 18 '12 at 19:02
@Yoshi - Sometimes it's hard to decide whether to call it a dup or not. I often mark dups, but decided that these two questions didn't quite seem identical even though the same answer helped solve them both - a judgement call, I guess. – jfriend00 Jul 18 '12 at 19:06

Preloading images in an array (and waiting until they have downloaded)

1 Answers1