onload event in <img> tags firing prematurely in Firefox, not other browsers

问题

The onload event in inline HTML is firing prematurely in Firefox and all browsers based on its Mozilla codebase (Tor, etc.) For example:

<img onload="myFunction()" src="image.jpg" />

This calls myFunction() after the image is fully loaded on Chrome, Opera, IE, and Safari (not sure about the new Edge browser, though), which is the expected and documented behavior.

However, on Firefox and its relatives, the function is called immediately upon the browser reading the <img> tag, i.e. before the loading of the image is finished. This is not the documented behavior and causes application problems.

This is confirmed and discussed in detail a few years ago here:

https://bugzilla.mozilla.org/show_bug.cgi?id=626613

I can't find anything that solves the problem, though, and I wonder if anyone else has run into this problem and has found the solution.

回答1:

I guess this could be solved doing something similar than what is done here image.onload event and browser cache

this could be the solution you are looking for

var img = new Image();
$(img).one('load', function() {
  alert("image is loaded");
});
img.src = "http://url.image.jpg";

$(img).appendTo('body');

http://jsfiddle.net/ult_combo/GKFxP/5/

What i guess is your problem is that the onload that is associated to the img tag is the window onload method https://developer.mozilla.org/es/docs/Web/API/GlobalEventHandlers/onload

来源：https://stackoverflow.com/questions/32927064/onload-event-in-img-tags-firing-prematurely-in-firefox-not-other-browsers