ready()与onload()的区别

深碍√TFBOYSˉ_ 2022-03-17 11:48 209阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td>window.onload()</td> 
   <td>$(document).ready()</td> 
  </tr> 
  <tr> 
   <td>加载时机</td> 
   <td> <p>&nbsp; 必须等待网页全部加载完毕（包括图片等），然后再执行JS代码</p> </td> 
   <td> <p>只需要等待网页中的DOM结构加载完毕，就能执行JS代码</p> </td> 
  </tr> 
  <tr> 
   <td>执行次数</td> 
   <td> <p>只能执行一次，如果第二次，那么第一次的执行会被覆盖</p> </td> 
   <td> <p>可以执行多次，第N次都不会被上一次覆盖</p> </td> 
  </tr> 
  <tr> 
   <td>举例</td> 
   <td> <p>以下代码无法正确执行：&nbsp;<em><em><em>&nbsp;</em></em></em></p> <pre><code>window.onload = function()  { alert(“text1”);};

window.onload = function()  { alert(“text2”);};&nbsp;</code></pre> <p>结果只输出第二个</p> </td> 
   <td> <p>以下代码正确执行：&nbsp;</p> <pre><code>$(document).ready(function(){alert(“Hello”)});

$(document).ready(function(){alert(“Hello”)}); </code></pre> <p>结果两次都输出</p> </td> 
  </tr> 
  <tr> 
   <td>简写方案</td> 
   <td>无&nbsp;&nbsp;</td> 
   <td>$(function () {})</td> 
  </tr> 
 </tbody> 
</table>

一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包括页面上的图片，以及大的表格数据。如果页面上图片较多或图片太大,加载需要较多时间，就会导致页面无响应，或者用户做了其它操作了。

而Jeuery中的ready()则是在页面的dom(节点)加载完后就可以做相应的操作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片，而不一定要等它显示出来就可以为它绑定点击方法。

load()一般不建议使用

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

相关 $(document).ready() 与window.onload的区别

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。

清疚/ 2024年02月17日 15:53/ 0 赞/ 35 阅读

相关问题：jQuery Ready 与 Window onload 的区别

[jQuery Ready 与 Window onload 的区别][jQuery Ready _ Window onload] [jQuery Ready _ Win

待我称王封你为后i/ 2022年09月24日 13:29/ 0 赞/ 475 阅读

相关 jquery $(document).ready() 与window.onload的区别

1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DO

「爱情、让人受尽委屈。」/ 2022年09月18日 14:56/ 0 赞/ 124 阅读

相关 jQuery ready与window.onload的区别

以浏览器装载文档为例，页面加载完毕后，浏览器会通过javascript为DOM元素添加事件，在常规的Javascript代码中，通常使用window.onload方法，而在Jq

水深无声/ 2022年07月16日 01:53/ 0 赞/ 171 阅读

相关 $(document).ready()与window.onload的区别

jQuery提供了ready()方法，用来代替javascript核心的window.onload，事件通常与DOM的文档对象绑定。而ready()方法的参数是一个函数

朱雀/ 2022年07月14日 04:57/ 0 赞/ 150 阅读

相关 $(document).ready()与window.onload的区别

执行时间不同 $(document).ready()是在浏览器已经解析完整个html文档，dom树已经建立起来，但像图片等资源文件还没有加载之前的时候执行的。 wind

Bertha 。/ 2022年06月14日 12:20/ 0 赞/ 182 阅读

相关 window.onload与document.ready()的区别

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。

爱被打了一巴掌/ 2022年06月08日 14:20/ 0 赞/ 206 阅读

相关 ready()与onload()的区别

<table> <tbody> <tr> <td> </td> <td>window.onload()</td> <td>$(doc

深碍√TFBOYSˉ_/ 2022年03月17日 11:48/ 0 赞/ 210 阅读

相关前端中onload与ready的区别

Jquery的ready()与Javascrpit的load() <table> <tbody> <tr> <td>1</td> <

缺乏、安全感/ 2021年12月23日 12:49/ 0 赞/ 231 阅读

相关 $(document) .ready()与window. onload的区别

JQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有

缺乏、安全感/ 2021年12月14日 10:13/ 0 赞/ 291 阅读