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.7except 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.
沒有留言 :
張貼留言