Determine if the IMG image is loaded successfully

After work, keep a record of the interesting problems that are encountered in your work ...

The thing is this ... When making an embedded H5 app, there is a "Personal business Card" page ... Requirements: If the background interface has a picture link to the avatar with their given, if not given, the front-end to a default avatar ... During the test, it was found that the image link of the interface could be invalid, just like such a link http://www.test.com/wuxiao.png ... What we did was to determine if the Avaterurl (Avatar Link field) exists, and there is no way to know if the image is valid ... If an invalid image link is shown, it's obviously bad ...

iOS developers said: "We can know if this image fails to load, we will replace the other images."

At that time I thought: Can the front-end determine whether the image is loaded successfully? So I started to understand the IMG loading ... (Bowen only gives me the most recommended practice, some not reliable discussion ...) ）

It takes 2 events to determine if an IMG is loaded successfully: OnLoad and onerror ... But when does the picture bind the event? Window.onload will not work after, because window.onload execution when the picture has been loaded ... The Ready method of jquery does not work either, because IMG does not bind an error event when it fails to load the image, which causes the invalid image to be replaced ... One might think of an event delegate, but these 2 events are not supported by the event delegate ... However, a different idea, the global binding load or Error event, and then determine whether the event object is IMG, only the IMG to do the operation ...

1. Successful loading

// the Load event is triggered when the picture is loaded successfully, and failure does not trigger function (event) {  var ev=event?event| | window.event;   var elem = ev.target;   if (elem.tagName.toLowerCase () = = ' img ')      {//   picture loaded successfully    // Do   something ... true);   

2. Load Failure

// The error event is triggered when the picture is loaded successfully, and the success does not trigger function (event) {  var ev=event?event| | window.event;   var elem = ev.target;   if (elem.tagName.toLowerCase () = = ' img ')     {//  picture loading  failed    elem.src = ". /img/default.jpg ";   true);

Seemingly perfect replacement, but if your default picture loading also fails ... So still want to write good alt attribute, prompt user to lose picture content ...

Reference Link: www.jb51.net/article/129321.htm

About the success of the picture loading discussion ... If you have a good plan, please leave a comment ...