JS - jQuery Event 中 load() 、 ready() 的差异 _JavaScript

JS - jQuery Event 中 load() 、 ready() 的区别

在jQuery中，要做到"等网页载入后再执行"，我们有两种选择
???? $(document).ready(fn) 与 $(window).load(fn)
???? 二者的差别在于：
??????? $(document).ready(fn)发生在"网页本身的HTML"载入后就触发，
????? ? $(window).load(fn)则会等到"网页HTML标签中引用的图档、内嵌物件(如Flash)、IFrame"等拉哩拉杂的东西都载入后才会触发。

一般来说，等网页全部元素都载入才执行程式时机有点晚，因为在此之前，使用者已经可以点选操作网页，跳脱我们程式的掌控范围。因此，我们几乎都是将程式放在$(document).read(function() { ... })中(即$(function() { … }))。
$(window).load(fn)适合执行一些要等待图档或元素全部载入才可进行的动作，例如:检查图档长宽。换句话说，上回的大图自动缩小Script可以透过$(window).load(fn)改写得更简单，完全不用担心图档没下载完成时的特殊处理，算是一个很好的应用范例。

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>    
  <title></title>    
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>    <script type="text/javascript">        
   $(function() {            
       alert("ready event!");        
   });        
   $(window).load(function(){            
      alert("load event!");        
  });    
 </script>
 </head>
 <body>
 <img src="http://blender-archi.tuxfamily.org/images/Sky_angmap_4.jpg" />
</body>
</html>