温馨提示×

细说document.ready和window.onload

小云
100
2023-09-23 06:12:38
栏目: 编程语言

document.ready是jQuery提供的一个函数,用于在文档加载完成后执行一些代码。它相当于JavaScript中的window.onload,但有一些区别。

  1. 执行时机:
  • document.ready:在DOM树构建完成后即可执行,不需要等待外部资源(如图片)加载完成。

  • window.onload:需要等待页面的所有资源加载完成后才能执行,包括外部资源和图片等。

  1. 代码书写:
  • document.ready:使用jQuery库中的函数,代码可以直接写在一个回调函数中。

  • window.onload:需要在JavaScript中使用事件监听的方式来写,或者在HTML中直接调用一个函数。

  1. 多次调用:
  • document.ready:可以多次调用,每次调用都会将新的函数添加到执行队列中。

  • window.onload:只能在页面加载时调用一次,多次调用会覆盖之前的事件。

  1. 兼容性:
  • document.ready:依赖于jQuery库,只能在引入了jQuery库的页面中使用。

  • window.onload:原生JavaScript事件,几乎在所有浏览器中都可以使用。

  1. 执行顺序:
  • document.ready:多个document.ready函数会按照调用顺序依次执行。

  • window.onload:多个window.onload函数会按照调用顺序依次执行。

总的来说,document.ready更适合在DOM加载完成后执行一些操作,比如绑定事件、修改DOM元素等。而window.onload更适合在页面所有资源加载完成后执行一些操作,比如初始化一些需要依赖资源的组件、发送网络请求等。

0