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?

Did you see the part at http://api.jquery.com/load-event/ which says "Caveats of the load event when used with images"? Also: http://stackoverflow.com/q/3877027/901048 — Blazemonger, Apr 08 '13 at 20:39
Thanks Blazemonger yes I saw that reference in the api. I was just wondering if there was any way to reliably detect image load completion. — Max Hartshorn, Apr 08 '13 at 20:50

score 0 · Answer 1 · answered Sep 23 '14 at 05:55

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.

Image onload event not firing in firefox

1 Answers1