JQuery中$(window).load和$(document).ready的区别与执行顺序

在前端开发中，我们经常会使用jQuery库来简化代码并提高开发效率。其中，$(window).load()和$(document).ready()是两种常用的jQuery函数，它们都可以用来在页面加载完成后执行JavaScript脚本。但是，它们之间有什么区别呢？在什么情况下应该使用哪个呢？

区别

$(document).ready()

$(document).ready()函数在DOM树加载完成后就会执行，而不需要等到所有资源（如图片、样式表等）都加载完毕。这使得$(document).ready()成为了执行一些初始化代码的理想时机，因为它能够在用户看到页面之前就已经完成。

$(window).load()

相比之下，$(window).load()函数需要等待所有资源都加载完成后才会执行，包括图片、样式表、嵌入式框架等。这意味着$(window).load()会比$(document).ready()慢一些，但也更加可靠，因为它确保了所有元素都已经加载完毕。

执行顺序

如果同时调用了$(document).ready()和$(window).load()函数，它们的执行顺序如下：

$(document).ready()函数首先执行。
页面DOM树加载完成后，$(document).ready()函数执行完成。
所有资源（包括图片、样式表等）加载完毕后，$(window).load()函数执行。

示例代码

下面是一个简单的示例，演示了$(document).ready()和$(window).load()的使用及其区别：

--------- -----
------
------
    ----------------------- -- ---------------------------
    ------- -----------------------------------------------------------
    ------- -----------------------
        ---------------------------- -
            -------------------------------- -----------
        ---

        ------------------------- -
            ----------------------------- -----------
        ---
    ---------
-------
------
    ---- ------------------
-------
-------

上述代码中，当页面在浏览器中加载时，控制台将输出以下内容：

------------------- --------
---------------- --------

这表明$(document).ready()函数首先执行，然后是$(window).load()函数。

指导意义

总之，$(document).ready()和$(window).load()都可以用来在页面加载完成后执行JavaScript脚本。但是要根据实际需求选择合适的函数。如果只需要初始化一些代码，则应该优先考虑$(document).ready()。如果需要确保所有元素都已经加载完毕，则应该使用$(window).load()。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/1651

JQuery中$(window).load和$(document).ready区别与执行顺序