load、$(document).ready、DOMContentLoaded的区别

load、$(document).ready 和 DOMContentLoaded 是用于处理页面加载和文档准备就绪的事件和方法。它们有以下区别：

1. load 事件：load 事件在整个页面及其所有外部资源（如图像、样式表、脚本等）都加载完成后触发。可以通过 JavaScript 或 jQuery 来监听 load 事件，例如：

   window.addEventListener('load', function() {
        
     // 页面和所有资源加载完成后执行的代码
   });
   

   $(window).on('load', function() {
        
     // 页面和所有资源加载完成后执行的代码
   });
   

   load 事件适用于在页面完全加载后执行一些操作，例如处理图像的尺寸、启动动画效果等。

2. $(document).ready（又称为 jQuery 的 DOM 就绪事件）：$(document).ready 是 jQuery 提供的方法，它在文档结构准备完毕并可以操作时触发。它表示 DOM 已经解析完毕，但可能仍在等待外部资源的加载完成。可以使用以下方式监听 $(document).ready 事件：

   $(document).ready(function() {
        
     // DOM 准备就绪后执行的代码
   });
   

   或者使用简化的写法：

   $(function() {
        
     // DOM 准备就绪后执行的代码
   });
   

   $(document).ready 事件适用于在 DOM 解析完毕后执行一些操作，例如绑定事件处理程序、修改 DOM 元素等。需要注意的是，现代版本的 jQuery 已经对 $(document).ready 进行了优化，使其在大多数情况下不再需要显式调用。

3. DOMContentLoaded 事件：DOMContentLoaded 事件是原生 JavaScript 提供的事件，当整个 HTML 文档被解析并转化为 DOM 树时触发。可以使用以下方式监听 DOMContentLoaded 事件：

   document.addEventListener('DOMContentLoaded', function() {
        
     // DOM 准备就绪后执行的代码
   });
   

   DOMContentLoaded 事件与 $(document).ready 事件类似，表示 DOM 结构已经准备好，可以进行操作。但与 $(document).ready 不同，DOMContentLoaded 是原生 JavaScript 的事件，不依赖于任何库或框架。

总结来说，load 事件在整个页面和资源加载完成后触发，$(document).ready 事件在 DOM 结构准备就绪后触发（使用 jQuery），而 DOMContentLoaded 事件在 DOM 解析完成后触发（原生 JavaScript）。

注意：在使用 load 事件或 $(document).ready 事件时，确保它们在实际需要时才被触发，以避免不必要的延迟。而 DOMContentLoaded 事件是一个原生事件，无需担心触发时机的问题。