window.onload vs $（document）.ready（）

 

JavaScript的window.onload和jQuery的$(document).ready()方法有什么区别？

ready事件发生在HTML文档被加载后，而onload事件发生在稍后，当所有内容（例如图像）也被加载时。

onload事件是DOM中的标准事件，而ready事件特定于jQuery。 ready事件的目的是在文档加载后应尽早发生，以便为页面中的元素添加功能的代码不必等待所有内容加载。

window.onload是内置的JavaScript事件，但由于它的实现在浏览器（Firefox，Internet Explorer 6，Internet Explorer 8和Opera）中存在微妙的怪癖，jQuery提供了document.ready ，它将这些事件抽象出来，并尽快触发因为页面的DOM准备就绪（不会等待图像等）。

$(document).ready （注意它不是document.ready ，它是未定义的）是一个jQuery函数，封装并提供以下事件的一致性：

  • document.ondomcontentready / document.ondomcontentloaded - 一个新的事件，当文档的DOM被加载时会触发（这可能是在图像等被加载之前的一段时间）; 再次，在Internet Explorer和世界其他地方略有不同
  • 和window.onload （即使在旧浏览器中也实现），当整个页面加载时（图像，样式等）

    • $(document).ready()是一个jQuery事件。 JQuery的$(document).ready()方法一旦DOM准备好就会被调用（这意味着浏览器已经解析了HTML并构建了DOM树）。 这允许您在文档准备好被操作后立即运行代码。

    例如，如果浏览器支持DOMContentLoaded事件（与许多非IE浏览器一样），那么它将触发该事件。 （请注意，DOMContentLoaded事件仅添加到IE9 +中的IE中。）

    两种语法可以用于此： 

    $( document ).ready(function() {
   console.log( "ready!" );
});

    或简写版本： 

    $(function() {
   console.log( "ready!" );
});

    $(document).ready()要点：

  • 它不会等待图像加载。
  • 用于在DOM完全加载时执行JavaScript。 把事件处理程序放在这里。
  • 可以多次使用。
  • 当您收到“$未定义”时，请将$替换$ jQuery 。
  • 如果您想操作图像，则不使用。 使用$(window).load()来代替。

    • window.onload()是一个本地JavaScript函数。 当页面上的所有内容都被加载时， window.onload()事件触发，包括DOM（文档对象模型），横幅广告和图像。 两者之间的另一个区别是，虽然我们可以有多个$(document).ready()函数，但我们只能有一个onload函数。

    链接地址: http://www.djcxy.com/p/73953.html

    上一篇: window.onload vs $(document).ready()

    下一篇: How to uncheck checked radio button