How to tell if a picture (IMG) has been loaded successfully-based on react

Original address: http://andrewhfarmer.com/detect-image-load/

I used to ask:

　Is there a way to determine if the sub-class component has been rendered complete?

The answer, of course componentDidMount() , is that when the react component has been rendered, it is calledcomponentDidMount()方法

If you have componentDidMount() 不太熟悉， 那么建议你去看看react组件的生命周期（React Component Lifecycle Methods）， Every method you use will be used sooner or later .

A little more understanding, you will realize that the questioner really want to know is when the picture is finished loading , in order to react has been rendered tag as the standard can not be taken to determine that the picture has been loaded completed.

Let's build a few simple definitions to understand rendered and loaded:

Rendered(also called render completion ): React has transformed your virtual DOM elements into real DOM elements and connected to the real DOM.

loaded: Refers to the picture data or other remote clients from the server side of the content has been downloaded (or has failed to download)

If you're not all clear, simply put, render will always be before load

Why wait for a picture to load?

Well, maybe when your picture is already loaded you want to:

• Hides the loading icon.
• Load more pictures automatically.
• Transform the UI to make the picture more prominent.
• or any other reason.

To find out how to determine how a picture loads the event, then read on.

OnLoad & OnError

Both the onload and onerror properties, as well as the normal use of the dom label (htmlimageelement), react to use the hump format to get the event, which is also onLoadand onError的来由。react的文档中已经提倡这么用了，但并没有讨论具体为什么要这么用（Image Events）

So you just add onLoad onError and these two events are in your react tags on the line. If still not clear enough, then look at the code below Chestnut Bar!

Short Example

Here is a short chestnut about using the onLoad event, want to see more details on how to display the loading graph until the icon is loaded to complete the chestnuts, just look at the author's next article (React Image Gallery)

Below this component, Imagewithstatustext, loads a picture and displays a piece of text: ' Loaded ' or ' failed to load '

Import React from ' React '; class Imagewithstatustext extends React.component {constructor (props) {super (props);  This. State = {imagestatus:NULL }; } handleimageloaded () { This. SetState ({imagestatus: ' Loaded ' }); } handleimageerrored () { This. SetState ({imagestatus: ' Failed to load ' }); } render () {return (      <div> <img SRC={ This. Props.imageurl} onLoad={ This. Handleimageloaded.bind ( This)} onError={ This. Handleimageerrored.bind ( This)}          /> { This. State.imagestatus}</div>    ); }}exportdefaultImagewithstatustext;

It's pretty short. Understand well, hope is useful to you (this phrase is the translator's blind beep)

How to tell if the picture (IMG) has been loaded successfully-based on react