该文档。ready事件发生时，HTML文档已加载，窗口。Onload事件总是稍后发生，当所有内容(图像等)都已加载。

你可以使用文档。Ready事件，如果你想在渲染过程中“早期”介入，而不等待图像加载。 如果你需要图像(或任何其他“内容”)在你的脚本“做一些事情”之前准备好，你需要等到window.onload。

例如，如果您正在实现“幻灯片显示”模式，并且需要根据图像大小执行计算，则可能希望等到window.onload。否则，您可能会遇到一些随机问题，这取决于图像加载的速度。您的脚本将与加载图像的线程同时运行。如果脚本足够长，或者服务器足够快，如果图像恰好及时到达，您可能不会注意到问题。但是最安全的做法是允许图像被加载。

文档。Ready可以是一个很好的事件，让你向用户显示一些“loading…”标志，并在窗口上显示。onload，你可以完成任何需要加载资源的脚本，然后最后删除“Loading…”标志。

例子:-

// document ready events
$(document).ready(function(){
     alert("document is ready..");
})

// using JQuery
$(function(){
   alert("document is ready..");
})

// window on load event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;

窗口。onload是JavaScript内置函数。窗口。当HTML页面加载时，onload触发器。窗口。Onload只能写入一次。

文档。ready是jQuery库的一个函数。文档。ready在HTML文件中包含的HTML和所有JavaScript代码、CSS和图像完全加载时触发。 文档。Ready可以根据需要写多次。

窗口。onload是内置的JavaScript事件，但是由于它的实现在浏览器(Firefox、Internet Explorer 6、Internet Explorer 8和Opera)上有一些微妙的特点，jQuery提供了文档。ready，它将这些抽象出来，并在页面的DOM准备好后立即触发(不等待图像等)。

美元(文档)。准备(注意，这不是文档。ready(未定义)是一个jQuery函数，包装并提供以下事件的一致性:

DOMContentLoaded -一个新的事件，当文档的DOM加载时触发(这可能是在图像等加载之前的一段时间);同样，在ie浏览器和世界其他地方略有不同 和窗口。Onload(即使在旧浏览器中也实现了)，当整个页面加载(图像，样式等)时触发。

时间过得真快，现在是ECMAScript 2021年，人们越来越少使用IE11。相反，最多的两个事件是load和DOMContentLoaded。

DOMContentLoaded在初始HTML文档完全加载和解析后触发。

load在DOMContentLoaded和整个页面加载后触发， 等待所有相关资源完成加载。资源示例:脚本，样式表，图像和iframe等。

重点:同步脚本将暂停DOM的解析。

这两个事件都可以用来确定DOM是否可以使用。例子:

<script>
    // DOM hasn't been completely parsed
    document.body; // null

    window.addEventListener('DOMContentLoaded', () => {
        // Now safely manipulate DOM
        document.querySelector('#id');
        document.body.appendChild();
    });

    /**
     * Should be used only to detect a fully-loaded page.
     * 
     * If you just want to manipulate DOM safely, `DOMContentLoaded` is better.
     */
    window.addEventListener('load', () => {
        // Safely manipulate DOM too
        document.links;
    });
</script>

该文档。ready事件发生时，HTML文档已加载，窗口。Onload事件总是稍后发生，当所有内容(图像等)都已加载。

你可以使用文档。Ready事件，如果你想在渲染过程中“早期”介入，而不等待图像加载。 如果你需要图像(或任何其他“内容”)在你的脚本“做一些事情”之前准备好，你需要等到window.onload。

例如，如果您正在实现“幻灯片显示”模式，并且需要根据图像大小执行计算，则可能希望等到window.onload。否则，您可能会遇到一些随机问题，这取决于图像加载的速度。您的脚本将与加载图像的线程同时运行。如果脚本足够长，或者服务器足够快，如果图像恰好及时到达，您可能不会注意到问题。但是最安全的做法是允许图像被加载。

文档。Ready可以是一个很好的事件，让你向用户显示一些“loading…”标志，并在窗口上显示。onload，你可以完成任何需要加载资源的脚本，然后最后删除“Loading…”标志。

例子:-

// document ready events
$(document).ready(function(){
     alert("document is ready..");
})

// using JQuery
$(function(){
   alert("document is ready..");
})

// window on load event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;

事件

美元(文档)。on('ready'， handler)绑定到来自jQuery的ready事件。加载DOM时调用处理程序。像图像这样的资产可能仍然缺失。如果文档在绑定时已经准备好，那么它将永远不会被调用。jQuery为此使用DOMContentLoaded-Event，如果不可用则模拟它。

美元(文档)。On ('load'， handler)是一个事件，当所有资源从服务器加载时将被触发。图像现在已经加载。onload是一个原始HTML事件，而ready是由jQuery构建的。

功能

$(document).ready(handler)实际上是一个承诺。如果在调用时文档已经准备好，则处理程序将立即被调用。否则它会绑定到ready-Event。

在jQuery 1.8之前，$(document).load(handler)作为$(document).on('load'，handler)的别名存在。

进一步的阅读

时机 在函数就绪时 一个例子 承诺 删除的事件别名