image.onload not firing twice in IE7

Answer 1

It's caused because IE will cache the image, and the onload event will never fire after it's already been loaded.

You need to position the onload event before the src.

var availablePages = ['1002_001','1002_002','1002_003','1002_004','1002_005'];

function seePage(index) {
    $get('imgSingle').src = 'graphics/loading.gif';
    var img = new Image();
    img.onload = function() {
         var single = $get('imgSingle');
         single.src = img.src;
    }
    img.src = 'get.jpg.aspx?size=single&id=' + availablePages[index];
}

Answer 2

Another way of doing this is to check if the image is already loaded with image.complete. For instance:

var img = new Image();
img.src = 'foo.jpg';
if(img.complete){
    img.onload = function(){ /* ... */ };
} else {
    /* execute something else, or the same. */
}

I've experienced this behavior in IE6 and 7.

Answer 3

Hi, I have a similar problem with Firefox 3.6.2 (3.5.x works just fine).

This is the code:

...
var newImage = new Image();
newImage.onload=function() {swapMapImg(newImage);};
newImage.src = newBackground;
...

function swapMapImg(newImage) {
    alert('bingo');
}

Firefox 3.6.2 no longer fires off my onload event, any ideas? Thank you!