在前端开发中，我们经常会使用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() executed $(window).load() executed
这表明$(document).ready()函数首先执行，然后是$(window).load()函数。
指导意义
总之，$(document).ready()和$(window).load()都可以用来在页面加载完成后执行JavaScript脚本。但是要根据实际需求选择合适的函数。如果只需要初始化一些代码，则应该优先考虑$(document).ready()。如果需要确保所有元素都已经加载完毕，则应该使用$(window).load()。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1651