window.onload和$(document).ready()之间的区别

window.onload和$(document).ready()都是用于在页面加载完成后执行特定代码的方法，但它们之间存在一些区别：

一、执行时机

1. window.onload：

   • 当页面的所有资源（包括图片、样式表、脚本等）都完全加载完毕后才会触发。
   • 这意味着如果页面上有较大的图片或其他资源需要较长时间加载，那么window.onload的执行会被延迟。

2. $(document).ready()：

   • 当 DOM（文档对象模型）树构建完成后就会触发，此时页面的 HTML 结构已经加载完毕，但可能某些外部资源（如图片）可能还在加载中。
   • 一般来说，$(document).ready()会比window.onload更快执行。

二、语法和使用方式

1. window.onload：

   • 使用传统的 JavaScript 语法，通常写成window.onload = function() {...}。
   • 只能为window.onload指定一个函数，如果多次赋值，后面的会覆盖前面的。

2. $(document).ready()：

   • 这是 jQuery 提供的方法，语法更加简洁和灵活。可以写成$(document).ready(function() {...})，也可以使用更简洁的$(function() {...})形式。
   • jQuery 允许多次调用$(document).ready()，所有注册的函数都会按照它们被注册的顺序依次执行。

三、适用性

1. window.onload：

   • 如果你的代码需要确保所有资源都加载完毕后才能执行，比如对页面上的图片尺寸进行操作，那么可以使用window.onload。
   • 但是由于其执行时机较晚，可能会导致用户等待时间较长，影响用户体验。

2. $(document).ready()：

   • 在大多数情况下，当你只需要在 DOM 结构准备好后就执行代码，比如绑定事件、操作 DOM 元素等，使用$(document).ready()更为合适。
   • jQuery 的广泛使用使得$(document).ready()在很多项目中成为首选，因为它提供了更方便的语法和更好的兼容性。

综上所述，window.onload和$(document).ready()在执行时机、语法和适用性方面都存在一些区别。在实际开发中，可以根据具体需求选择合适的方法来确保代码在正确的时机执行。

原文地址：https://blog.csdn.net/qq_41413652/article/details/143686062

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！