javascript - Google Chrome is doing things wrong again -

width and height value reporting for images during incorrect images After, or just after, the load time is used in this code example:

If you insert a script into the $ (function () {}) function, the result is the same, but if the page runs the code after a few seconds of loading , Returns the correct result.

  & lt; Script & gt; Function example () {var img = $ ('img # image01'); Img.width () // 145 in both Firefox and Chrome Img.height () // 134 returns in both Firefox and Chrome} Window.setTimeout (e.g., 1000) & lt; / Script & gt; If the value is  width  and  height  in     tags, then the script will be expected to both work as expected and.  
  & lt; Img id = 'image01' src = '/ images / picture.jpg' width = 145 height = 134 / & gt;  
 
 But as you can not always control the html input, this is not an ideal solution. Can this problem be compromised with a better solution? Or do I need to specify  width and height  for each image in my code? 
 

Inline your quoted code is getting the proper result, because the image is executed before your code is executed Can not load. You have said that you put it in a onload handler and it has the same result. Did you really mean a oload handler? Because I can not repeat that result, note that the jQuery ready function not is a onload handler, before that too long before it. To ensure the images are being loaded, use the load event or window load event for the image. ('load', function () {var img = $ ("# theimage"); log ("width:" + img.width (< ); Log ("height:" + img.height ());});

... (where logs is a page that gives output), and it should work:

  $ (Document). (Function () {$ ("# theimage"). Bind (note '' load '', function () {// var img = $ (this); log ("width:" + img. Width ()); Log ("height:" + img.height ());});});  

... but it will not:

  $ (document) .ready (function () {var img = $ ("# theimage") ; Log ("width:" + img.width ()); log ("height:" + img.height ());});  

... because it happens very soon.

Edit : I really should have said really in the above: if you 're of the image load event (instead of window load events), you must check that the image is not already filled because it's already load event It may look like:

  get $ (document) .ready (function () {var img, imgElement; // image image = $ ("# theimage") ; ImgElement = IMG [0]; if ( IGIMENT & amp; Examination.com) * {// is pre-loaded, load the handler directly; HDLOR call (IMGIMENT);} and {// have not been loaded yet, event IMG.bund ('load ', LoadHandler);} Load Loader Handler () {var img = $ (this); log ("width:" + img.width ()); log ("height:" + img.height ()); img Unbind ( 'Load', loadHandler);}}};  

This will call loadHandler on the first occasion, whether the image load has run the race or Ready code won the race.