Javascript problem with Internet Explorer (v8)

[abrakatabra83]

I all, i am making a web site which has a menu, and when you click on a menu item, a thumbnail list should appear. I am trying to preload all the images that should appear and then display them. It works fine on every browser except IE (i have version 8). I have put together the code for anyone willing to take a look here: http://jsfiddle.net/THpgM/2/

I think the problem lies in this piece of code (which is near the bottom of the first function in the fiddle)

img.onload = (function(i){ 
  // code here is executed
  return function(){
    // code here is not
    ++totalLoaded;
    document.getElementById("li" + i).style.height = this.height + "px";
    document.getElementById("li" + i).setAttribute("data-height", this.height);

    if(totalLoaded == totalThumbs){
      // do some stuff
    }
  };
})(i);

I have spent like 2 days trying to figure this out. If someone could please help me with this it would be greatly appreciated.

[paul_wilkins]

I have spent like 2 days trying to figure this out. If someone could please help me with this it would be greatly appreciated.

IE8 only fires the load event on an image if it has to download that image from the server.
If it gets the image from its cache, it doesn't fire the load event.

That's the cause of the problem, but I'm not so sure as to a viable solution, other than using the document onload event.

You may find some viable ideas though in this post: http://stackoverflow.com/questions/1...rk-well-in-ie7

[abrakatabra83]

Thanks Paul. You are spot on about the problem, someone else happened to help me with this before you, and all i had to do was to place img.src before img.onload (i had img.onload before img.src).

Thanks anyway =)