jQuery中的.ready()和window.onload的区别及示例代码

在JavaScript和jQuery中，我们经常需要在文档加载完毕后执行一些代码。jQuery提供了.ready()函数，而原生JavaScript则提供了window.onload事件。尽管它们都用于在文档加载完成后执行代码，但它们有一些重要的区别。

1. 触发时机：

   • $.ready()：jQuery中的.ready()函数在DOM树完成解析后就会执行，无需等待其他资源（如图像）加载完成。这意味着它会更早地触发，即使页面上的资源尚未完全加载。
   • window.onload：window.onload事件在整个页面（包括所有资源）加载完成后触发。它必须等到所有图像、样式表和脚本等外部资源加载完毕后才会执行。

2. 多次调用：

   • $.ready()：可以多次调用.ready()函数。如果在页面上有多个.ready()函数，它们将按照被添加的顺序依次执行。
   • window.onload：window.onload事件只能被调用一次。如果多次定义了window.onload事件处理程序，只有最后一个定义的处理程序会被执行。

下面是一些示例代码，演示了如何使用$.ready()和window.onload。