document load 和 document ready 有什么区别

document load 和 document ready 是两个不同的事件，用于监听页面加载完成的时机。它们在不同的情况下触发

1. document load：load 事件在整个页面及其所有资源（如图片、样式表等）完全加载后触发。这包括页面中的所有内容和依赖文件的下载和渲染。当 load 事件触发时，页面上的所有元素都已经可访问和操作。

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

2. document ready：ready 事件（也称为 DOMContentLoaded）在 DOM 树构建完成并且页面的初始 HTML 文档被完全解析和加载后触发。这意味着 DOM 元素已经可以进行访问，但是某些外部资源（如图片）可能还没有加载完毕。通常情况下，ready 事件比 load 事件更早触发，因为它不需要等待所有资源的下载和渲染。

   $(document).on('ready', function() {
       // DOM 树构建完成后执行的代码
   });
    
   

总结来说，document load 事件表示页面的所有资源都已经加载完成，包括 DOM 元素以及所有的外部资源。而 document ready 事件则表示 DOM 树已经构建完成，可以对 DOM 元素进行操作，但是不一定所有外部资源都已经加载完成。

在实际应用中，如果你需要执行与 DOM 相关的操作，通常可以使用 document ready 事件。如果你需要确保页面上的所有资源都已经加载完毕，包括图片、样式表等，那么可以使用 document load 事件。

需要注意的是，如果你使用 jQuery，它提供了简化的方法来监听 document ready 事件：$(document).ready(function() { /* Your code here */ }); 或者 $(function() { /* Your code here */ });。

$(function() {
    // DOM 树构建完成后执行的代码
});