Question

I all, i am making a web site ( http://euroscala.balkanium.com/ ) 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.

Answer 1

In IE you MUST assign the .onload handler BEFORE you assign .src. If you don’t, then the onload event might fire before your onload handler is in place and you will miss the event.

// assign .onload before .src
img.onload = function() {};
img.src = "xxx.jpg";

The particular issue in IE will happen if the images are in the browser cache (thus they load immediately when .src is assigned) and your onload handler will never execute.

So, in your jsFiddle, move the assignment to .src to be after the assignment to .onload.