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!

score 5 · Accepted Answer · edited May 23 '17 at 12:14

5

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

edited May 23 '17 at 12:14

Community

1
1

answered Nov 21 '08 at 00:26

keparo

33,450
13
60
66

I've added a link to the answer which inludes an example snippet. – keparo Nov 21 '08 at 00:30

score 2 · Answer 2 · answered Nov 21 '08 at 00:23

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
 });

Strange this, some of the gallery is now working... clicking on some image thumbnails makes the image appear to the right but not on other image thumbnails. Sound strange or what? Thank you very much for your input. — alex, Nov 21 '08 at 00:27

score 0 · Answer 3 · answered Nov 21 '08 at 00:28

0

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
});

answered Nov 21 '08 at 00:28

Vincent Ramdhanie

102,349
23
137
192

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

3 Answers3