Image onload event not firing in firefox

Question

I'm creating an image preloader. It works fine in all browsers except Firefox (testing with Firefox 10.0). Basically the input is an array of images called image_list . These images are appended dynamically to the body of the document and a load callback is attached, which calls the function update_progress . The code is as follows:

$(image_list).each(function() {
      var x = $('<img />')
       .load(function() {update_progress(percent_loaded += step);})
       .attr('src', this)
       .appendTo('body')
       .css('display', 'none');
       .each(function() {
          if(this.complete)
             update_progress(percent_loaded += step);
      });
});

In Firefox, the load callback and update_progress are never called. Yet the exact same code works fine in chrome and all other browsers I've tested. Is there any way to detect when an image has loaded in Firefox?

Answer 1

I would first check to see whether the image has a height, by checking its height property.

if (the_image.height > 0) {
  // The image is already loaded (possibly cached)
}

If you have any cached images, etc, this should help you to get around that.