JS to determine whether the picture is loaded complete method Rollup (latest version) _javascript tips

Sometimes you need to get the size of the picture, which needs to be done after the picture is loaded. The following small series for everyone to organize a number of JS to determine whether the picture is loaded complete method summary, take a look at it.

First, the Load event

<script type= "Text/javascript" >
$ (' img '). onload = function () {
//code
}

Advantages: Easy to use without affecting HTML code.

Disadvantage: Only one element can be specified, Javascipt code must be placed below the picture element

Two, jquery method

<script type= "Text/javascript" >
$ (function () {
$ ('. Pic1 '). each (the function () {
$ (this). Load ( function () {
$ (this). FadeIn ();})
;
})

Note that you do not bind the Load event in $ (document). Ready ().

Benefits: You can bulk bind element events without affecting HTML code content
Disadvantage: Need jquery library support, code needs to be placed below the required action elements.

Iii. ReadyStateChange Events

<! DOCTYPE html>
 
 

ReadyState for complete and loaded indicates that the picture has been loaded. The test Ie6-ie10 supports this event and is not supported by other browsers.

Iv. Complete Properties of img

<! DOCTYPE html>
 
 

Polling constantly monitors the IMG complete property, and if True indicates that the picture has been loaded and stops polling. This property is supported by all browsers.

The above content is small make up to you to introduce the JS to determine whether the picture is loaded complete method summary, I hope to help you, but also very grateful to the cloud Habitat Community support site!