JS picture load gets no width and height solution summary

The first time you can not get the image of the width of the high value, print out are 0, these entanglements, how to solve it? With settimeout delay loading, 200 milliseconds after the execution, and so the picture can be completely loaded after the gain is wide, so that only to adapt to wide and horizontal vertical center.

Code

The code is as follows

Copy Code

var parent=$ (". Imgshow a img"); Parent.click (function () { Alert (Test.width ()); var url=$ (this). attr ("Big_show"); var big_i=$ (". big_show img"); Big_i.attr ("src", url); Big_i.hide (); if (big_i.is (": Hidden")) { settimeout (function () { $ (". Big_show"). Show (); Big_i.show (); $ (". Big_show"). Width (big_i.width ()); $ (". Big_show"). Height (big_i.height ()); var top=-(Big_i.height ()/2); var left=-(Big_i.width ()/2); $ (". Big_show"). CSS ({"Margin-left": Left, "Margin-top": Top}); alert (left); },200) } })

Instance

As long as the picture is loaded to get the width and height of the loaded picture, do you mean to load the picture before loading and then display the picture after loading?
As long as you decide whether the picture is loaded and then get the picture properties, here's an example

The code is as follows

Copy Code

* * @param the URL of the sURL picture * @param fcallback callback function, fcallback at least one parameter of type Object type is used to receive a picture's width, height, url * * Usage: * var url = " -05-26/c/c21ff1138e7349859b49b99312d05baf.jpg"; * FGETIMG (URL, Function (IMG) {alert (' Width: ' +img.width+ '; height: "+img.height+"; URL: "+img.url);}"; * */ var fgetimg = function (sURL, fcallback) { var img = new Image (); IMG.SRC = sURL + '? t= ' + math.random (); IE, Ajax caches, causing the onreadystatechange function to not be triggered, so you need to add a random number if (Fbrowser.isie) { Img.onreadystatechange = function () { if (this.readystate== "Loaded" | | | this.readystate== "complete") { Fcallback ({width:img.width, height:img.height, url:surl}); } }; }else if (Fbrowser.isfirefox | | Fbrowser.issafari | | Fbrowser.isopera | | Fbrowser.ischrome) { Img.onload = function () { Fcallback ({width:img.width, height:img.height, url:surl}); }; } Else { Fcallback ({width:img.width, height:img.height, url:surl}); } };

If just get picture ID there is still not allowed below to see another method, you in the picture download complete, direct access to your newly created IM tag width attribute on it, you take my code for you to run it, I can get the

The code is as follows	Copy Code
<script language= "javascript" type= "Text/javascript" > $ (function () { var im = new Image (); IM.SRC = $ (' #test '). attr (' loadsrc '); $ (IM). Load (function () { $ (' #test '). attr (' src ', $ (' #test '). attr (' loadsrc ')); alert (im.width); The key is this sentence }) }); </script>

A code that gets the size of a remote picture

The code is as follows

Copy Code

/*! @FileOverview Get picture size @date 2010/11/29 @param the CFG configuration item, cfg.img as a reference to a picture object or a url,cfg.oncomplete of a picture for subsequent operations to get the dimension, that is, a callback function. See examples for specific applications @return None */ function getimagesize (CFG) { var img=document.createelement (' img '), Callback=cfg.oncomplete; Img.src = typeof Cfg.img = = ' string '? Cfg.img:cfg.img.src; Img.setattribute (' style ', ' position:absolute;visibility:hidden; '); Document.body.appendChild (IMG); Img.onload=img.onerror=img.onreadystatechange=function () { if (img&&img.readystate&&img.readystate!= ' loaded ' &&img.readystate!= ' complete ') Return Img.onload = Img.onreadystatechange = Img.onerror = null; Callback.call ({"width": img.width, "height": img.height},null); Img.parentNode.removeChild (IMG); Img=null; }; } /* Example 1, get the size of the remote picture * * GetImageSize ({ IMG: ' Http://www.qiqiboy.com/wp-content/uploads/2010/11/bing.png ', Oncomplete:function () { Alert (' Width: ' +this.width+ ', ' + ' height: ' +this.height ') } }); /* Example 2, limit class to myimg picture size is less than 600 * * var imgs=getelementsbyclassname (' myimg ', ' img ', document),//getelementsbyclassname for a write-point acquisition method, not JS native support OH maxwidth=600;//Maximum width of 600 for (Var i=0;i GetImageSize ({ Img:imgs[i], Oncomplete:function () { if (this.width>maxwidth) { Imgs[i].height=math.round (This.height/this.width*maxwidth); Imgs[i].width=maxwidth; } } }); }