JavaScript & IE7 - Why won't my *.onload = function() { } fire?

Question

I have a gallery I quickly coded up for a small site, and under Firefox 3 and Safari 3 works fine. But when I test on my old best friend IE7, it seems to not fire the imageVar.onload = function() { // code here }.. which I want to use to stop the load effect and load the image.

Please bear in mind...

• I know the thumbnails are just scaled down version of the larger images. When the images are finalised by the client I am going to create proper thumbnails.
• This is my first attempt to try and get out of procedural JavaScript for the most part.. so please go easy and kindly let me know where my code sucks!

Answer 1

For successful use of Image.onload, you must register the event handler method before the src attribute is set.

Related Information in this Question:

Javascript callback for Image Loading

Answer 2

Cross browser event support is not so straightforward due to implementation differences. Since you are using jQuery at your site, you are better off using its events methods to normalize browser support:

instead of:

 window.load = function(){ 
      //actions to be performed on window load
 }

 imageViewer.image.onload = function(){ 
     //actions to be performed on image load
 }

Do:

$(window).load(function(){ 
    //actions to be performed on window load
});

 $(imageViewer.image).load(function(){ 
      //actions to be performed on image load
 });

Answer 3

Just to add to the suggestion by Eran to use the jQuery's built in event handlers you can run code when the document is loaded and the DOM is created but before the images are downloaded with:

$(document).ready(function(){
   //your code
});