JavaScript img onLoad and closures - why does this code trigger an infinite loop?

Question

I have some Google Maps JS that plots a number of markers on a map. However, when loading the markers I noticed that the images were not loading in time and so the markers were not being placed. To get around this I modified my function that returned a map marker as follows:

function newGoogleMapPin(type){
    var imgpath = "img/gmapicons/"+type+".png";
    var img = new Image();
        img.src = imgpath;
    var imgloaded = false;

    while(imgloaded == false) {
        img.onload = function() {
            imgloaded = true;
        }
    }

    return new google.maps.MarkerImage(imgpath, new google.maps.Size(img.width, img.height));
}

Problem being is imgloaded is never set to true, Am I misunderstanding closures? (I guess so!)

Answer 1

You have to keep in mind that JavaScript is fundamentally single-threaded, and this single thread is actually shared between JavaScript execution and browser rendering. Therefore your while loop will block the thread, and will loop forever.

while(imgloaded == false) {
    // onload will never get called:
    img.onload = function() {
        imgloaded = true;
    }
}

Answer 2

imgloaded in your code is a local variable (in the scope of newGoogleMapPin function). Thus, the imgloaded variable set in the onload callback is another variable. The first variable is always false in this case, which is causing an infinite loop.

To resolve the issue declare it as a global variable outside the function block.

Answer 3

All you are doing in your while loop is setting the onload handler of the image to a function. The function never actually gets called.

You should just set the onload handler once, and have the handler do whatever's required with the image (add the pin).

Something like this:

function newGoogleMapPin(type){
    var imgpath = "img/gmapicons/"+type+".png";
    var img = new Image();
    img.src = imgpath;
    img.onload = function() {
       new google.maps.MarkerImage(imgpath, new google.maps.Size(img.width, img.height));
    }
}