BloggerAds廣告

相關文章

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:
<html>
 <head>
  <title>event test</title>
  <script language="javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script language="javascript" >
  
  //Run a function when the page is fully loaded including graphics.
  $(window).load(function(){
   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.
  $(document).ready(function(){
   var _imageHeight=$("img").height();
   $("ol").append("<li>document ready, image's height is " + _imageHeight + "</li>");
  });
  </script>
 </head>
 <body>
  <ol></ol> <!-- use ordered list to show the call sequence -->
  <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>
 </body>
</html>
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()


沒有留言 :

張貼留言