2012年11月29日 星期四

jquery .height() problem in chrome/safari

The evilness of Chrome is not less then IE

Thanks my workmate discovered a problem on chrome.
when i use $.height(), it works well on other browsers but Chrome and Safari,
which is webkit based browser

after google, findings below:
$(document).ready() means the DOM is fully loaded, but does not mean the graphics were loaded.
$(window).load() fires after$(document).ready() and all graphics were fully loaded.

here i made an experiment:
  <title>event test</title>
  <script language="javascript" src=""></script>
  <script language="javascript" >
  //Run a function when the page is fully loaded including graphics.
   var _imageHeight=$("img").height();
   $("ol").append("<li>window load, image's height is " + _imageHeight + "</li>");
  //Specify a function to execute when the DOM is fully loaded.
   var _imageHeight=$("img").height();
   $("ol").append("<li>document ready, image's height is " + _imageHeight + "</li>");
  <ol></ol> <!-- use ordered list to show the call sequence -->
  <img src=""/>
the above code tested with IE7, IE8, firefox 17, Maxthon 3, Chrome 23 & Safari 5.1.7

except chrome and safari, all other results below:
1.document ready, image's height is 53
2.window load, image's height is 53

and chrome and safari results:

1.document ready, image's height is 0
2.window load, image's height is 53

which shows $(window).load() fires after $(document).ready()
and webkit-based browsers (except Maxthon3)
cannot get the height since all graphics have not been loaded.

in summery, it is better using $(window).load() instead of $(document).ready()