jQuery ready与window.onload的区别

水深无声 2022-07-16 01:53 166阅读 0赞

以浏览器装载文档为例，页面加载完毕后，浏览器会通过javascript为DOM元素添加事件，在常规的Javascript代码中，通常使用window.onload方法，而在Jquery中，使用的是$(document).ready()方法。由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的[html][]下载完毕，并且已经解析为DOM树了，但很有可能图片还没有加载完毕，此时图片的高度和宽度不一定有效。要解决这个问题，可以 使用Jquery中另一个关于页面加载的方法---load()方法。Load()方法会在元素的onload事件中绑定一个处理函数。原文来自：http://caibaojian.com/jquery-ready.html

如果处理函数绑定 给window对象，则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

下面给出[jQuery][] ready与window.onload的区别

<table> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td>window.onload</td> 
   <td>$(document).ready()</td> 
  </tr> 
  <tr> 
   <td>执行时机</td> 
   <td>必须等待网页中所有的内容加载完毕后(包括图片)才能执行</td> 
   <td>网页中所有DOM结构绘制完毕后就执行，可以能DOM元素关联的内容并没有加载完</td> 
  </tr> 
  <tr> 
   <td>编写个数</td> 
   <td> 
    <div>
      不能同时编写多个 
    </div> 
    <div>
      以下代码无法正确执行： 
    </div> 
    <div>
      window.onload = function(){ 
    </div> 
    <div>
      &nbsp;&nbsp; alert("caibaojian"); 
    </div> 
    <div>
      }; 
    </div> 
    <div>
      window.onload = function(){ 
    </div> 
    <div>
      &nbsp;&nbsp; alert("caibaojian.com"); 
    </div> 
    <div>
      }; 
    </div> 
    <div>
      结果只输出第二个 
    </div> </td> 
   <td> 
    <div>
      能同时编写多个 
    </div> 
    <div>
      以下代码正确执行： 
    </div> 
    <div>
      $(document).ready(function(){ 
    </div> 
    <div>
      &nbsp;&nbsp; alert("Hello Caibaojian"); 
    </div> 
    <div>
      }); 
    </div> 
    <div>
      $(document).ready(function(){ 
    </div> 
    <div>
      &nbsp;&nbsp; alert("Hello caibaojian.com"); 
    </div> 
    <div>
      }); 
    </div> 
    <div>
      结果两次都输出 
    </div> </td> 
  </tr> 
  <tr> 
   <td>简化写法</td> 
   <td>无</td> 
   <td> 
    <div>
      $(function(){ 
    </div> 
    <div>
      &nbsp;&nbsp; // do something 
    </div> 
    <div>
      }); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

原文链接：http://caibaojian.com/jquery-ready.html

[html]: http://caibaojian.com/t/html
[jQuery]: http://caibaojian.com/t/jquery