Checking images are loaded before rendering them

[Thaywood]

Hi

I am currently trying to fix this piece of code, it should once run check if images.room.moveroom.ready is true then render the image. But the ready does not change. Is there any way of implementing this without using jquery?

Code: Select all

var createImage = function (src) {
    var imgReady = false
    var img = new Image();
    img.onload = function () {
         imgReady = true;
    }
    img.src = src;
    var result = {img: img, ready: imgReady};
    return result;
};

var images = {
    room : {
        moveroom: createImage("/images/rooms/moveroom.png"),
        questI: createImage("./images/rooms/questI.png"),
        questQ: createImage("./images/rooms/questQ.png")
    }
};

[Jackolantern]

It isn't working because img.onload is asynchronous. When the createImage function runs, an event handler (your function) is only attached to img.onload, and then the execution continues on down and returns result, including the false imgReady flag. The rest of the function probably takes less than 1ms to run, and only after your function has already returned result does the onload function get triggered and the imgReady value is set (which is now in a closure). But because booleans are primitive types and not reference types, the value is not updated in your object because every usage only has a copy of it.

If you wanted to keep this pattern, you could change your boolean to be a property on an object instead of being a basic scalar value. You could do this:

Code: Select all

var imgReady = {
   value: false
};

This would make each place where it is used share the same value since objects are reference types.

Otherwise, you would need to change the pattern you are using to check for image loading. For example, you could create an object that holds a boolean for each image you need to pre-load (if you are loading images dynamically, this would also allow you to dynamically add boolean values into the object, thus making your pre-loader more generic). Then you create one function that gets attached to the onload events for all of the images you are pre-loading, which accepts one parameter (often called just "e") which you can use the path attribute to determine which image the event is firing for and set its boolean to true in your object. Then, inside that pre-load event handler function you would iterate through all of the values in your boolean-containing object, and if they are all set to true, you call a function to start the next phase of your application knowing that all of the images are pre-loaded.

Does that make sense?

[Thaywood]

Hi,

How would you do this in code as i get what you mean but dont know where to start.

T