$(document).ready和window.onload = function()有什么区别？

「已注销」

已于 2023-06-30 11:31:54 修改

阅读量99

点赞数

分类专栏：前端文章标签： html5 javascript

于 2023-06-13 09:28:00 首次发布

本文链接：https://blog.csdn.net/weixin_39716004/article/details/131181605

版权

6 篇文章 0 订阅

订阅专栏

文章对比了$(document).ready()和window.onload两种JavaScript事件处理函数，前者在DOM准备就绪时执行，不等待所有资源加载，可多次绑定；后者在页面及所有资源完全加载后触发，仅支持单个回调，适合需要全部资源到位的情况。

摘要由CSDN通过智能技术生成

$(document).ready() 和 window.onload 是用于在页面加载完成后执行 JavaScript 代码的两种常用方式，它们之间有以下区别：

触发时机：$(document).ready() 在 DOM 加载完成后即可触发，无需等待其他资源（如图片、样式表）加载完成。而 window.onload 必须等待页面所有资源加载完成后才会触发。

多次绑定：$(document).ready() 可以多次绑定，即可以在页面中的多个地方使用，每个绑定的回调函数都会在 DOM 加载完成后执行。而 window.onload 只能绑定一个回调函数，如果多次使用，只有最后一个绑定的回调函数会被执行。

执行时机：$(document).ready() 中的回调函数会在 DOM 加载完成后立即执行。这意味着它可以在页面中的任何位置被调用，而不需要等待其他脚本的执行。而 window.onload 中的回调函数会在整个页面及其所有资源加载完成后才会执行，包括图片、样式表、脚本等。

简化写法：$(document).ready() 可以简化为 $() 或者 $(function() {}) 的形式，更加简洁。而 window.onload 只能使用 window.onload = function() {} 的形式。

综上所述，如果只需要在 DOM 加载完成后执行一些操作，而无需等待其他资源的加载，可以使用 $(document).ready()，它更轻量且灵活。如果需要等待整个页面及其所有资源加载完成后再执行操作，可以使用 window.onload。

关注