How to determine whether the image is loaded and obtain the Image Width by JS

Web students often encounter situations where customers upload images to break through the webpage content area. The following describes how to use js to solve this problem, the specific idea is to process the width or height of the Image right after js judges that the Image on the client has been downloaded. js processes the Image mainly by using the Image object in js, the onload event and onreadystatechange are used to determine whether to perform the operation.

(1) method 1, through the onload event, for example:

Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var obj = new Image ();
Obj. src = "http://www.bkjia.com/uploads/allimg/131017/0Z1133F4-0.jpg ";
Obj. onload = function (){
Alert ('image width: '+ obj. width +'; Image height: '+ obj. height );
Document. getElementById ("mypic"). innnerHTML = " ";
}
</Script>
<Div id = "mypic"> onloading ...... </Div>

(2) Method 2: onreadystatechange

Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var obj = new Image ();
Obj. src = "http://www.bkjia.com/uploads/allimg/131017/0Z1133F4-0.jpg ";
Obj. onreadystatechange = function (){
If (this. readyState = "complete "){
Alert ('image width: '+ obj. width +'; Image height: '+ obj. height );
Document. getElementById ("mypic"). innnerHTML = " ";
}
}
</Script>
<Div id = "mypic"> onloading ...... </Div>