在js和jQuery使用中，经常使用到页面加载完成后执行某一方法。通过整理，大概是五种方式（其中有的只是书写方式不一样）。
(1) 使用jQuery的$(function){});
(2) 使用jQuery的$(document).ready(function(){});
前两者本质上没有区别，第1种是第2种的简写方式。两个是document加载完成后就执行方法。
(3) 使用jQuery的$(window).load(function(){});
(4) 使用window.onload = function(){}
第3种和第4种都是等到整个window加载完成执行方法体。两者也没有区别，只是一个使用dom对象，一个使用jQuery对象。
(5)在标签上静态绑定onload事件，<body onload=”aaa()”>等待body加载完成，就会执行aaa()方法。
那么，这五种方式，执行的先后顺序是怎么样的呢？
通过下方代码验证发现：
- 使用第一种 jQuery的
$(function){})和第二种 jQuery的$(document).ready(function(){});无论位置放置在哪里，总是优先其余三种方式（原因是：这两种方式是在document加载完成后就执行，后三种是等到整个window页面，如图片、视频等资源加载完成后才执行），这两者之间的执行顺序是谁在上方谁优先执行。 - 使用第三种 jQuery的
$(window).load(function(){});和第四种window.onload = function bbb(){}这两种方式，总是优先于<body onload=”aaa()”>执行。他们两者执行顺序也是根据谁在上方谁先执行。 - 使用第五种
<body onload=”aaa()”>总是最后执行。
代码：
<script type='text/javascript'>
window.onload = function(){
alert("页面加载完成====》onload");
}
$(window).load(function(){
alert("jquery===》window load" );
})
$(document).ready(function () {
alert("jquery====》document ready");
});
$(function(){
alert("jquery====》document onload");
});
function aaa(){
alert("静态标签====》onload");
}
</script>
<body onload="aaa()"></body>
jQuery ready()事件详解
当DOM准备就绪时，指定一个函数来执行。
.ready(handler)
- handler类型: Function()当DOM准备就绪时，执行的一个函数。
.ready()方法提供了一种方法，使得一旦页面的文档对象模型（DOM）变为安全的操纵，就立即运行JavaScript代码。这往往是执行与页面的用户视图或交互之前需要任务的好时机，例如添加事件处理程序和初始化插件。当多个函数通过连续调用添加到该方法中，它们根据它们被添加的DOM准备就绪的顺序执行。在jQuery 3.0中，jQuery保证了在一个处理程序中的异常发生，不会妨碍后续添加的处理程序的执行。
大多数浏览器提供了DOMContentLoaded事件形式的类似功能。然而，jQuery的.ready()方法的不同之处在于它是一个重要并且有效的方法：在代码调用.ready(handler)之前，如果 DOM 已经准备就绪并且浏览器已经触发DOMContentLoaded，handler处理函数仍然会被执行。相反，如果DOMContentLoaded事件侦听器在这个事件触发后才被添加进来，那么这个DOMContentLoaded事件的处理程序将永远不会被执行。
浏览器还提供了window对象上的load事件。当这个事件触发时候，表明该网页上的所有资源已加载，包括图像。此事件可以使用jQuery的$(window).on("load", handler)监听。当代码依赖加载的资源情况下，（例如，必需知道图像的尺寸时），那么代码应放置在一个load事件的处理程序中。
值得注意的是，虽然 DOM 准备就绪（ready）总是在页面被完全加载之前，但是在已经生效执行的.ready()处理程序代码中绑定load事件侦听器，通常是不安全的。例如，在页面加载后，可以使用一些方法动态加载脚本，如$.getScript()。虽然动态加载的脚本中的.ready()处理程序始终会被执行，但是在动态加载脚本中的window的load事件已经触发过了，所以那些load事件监听器将永远不会运行。
jQuery提供了几种方法来绑定函数，当DOM已准备就绪时，绑定的函数将会运行。以下所有语法是等价的：
$(handler)$(document).ready(handler)$("document").ready(handler)$("img").ready(handler)$().ready(handler)
在jQuery 3.0 中，只建议使用第一种语法（注：即$(handler)）;其他语法仍然能正常工作，但已被标记为弃用（注：将来的某个版本会被删除）。这是因为，这些选择器跟.ready()方法的行为没有任何关系，这是低效的，并可能导致对该方法行为不正确的假设。例如，第三条语法中，"document"选择器其实什么也没选择。第四语法表示等待文档（document）准备就绪，但从代码上看，它暗示（错误地）等待图像（"img"）准备就绪。
还有$(document).on("ready", handler),从jQuery 1.8开始已被标记为弃用，在jQuery 3.0中已经被删除。请注意，如果附加此事件之前，DOM 已经准备就绪，该处理程序将不被执行。
.ready()方法通常用于一个匿名函数：
$( document ).ready(function() {
// Handler for .ready() called.
});
这等价于调用推荐的方式：
$(function() {
// Handler for .ready() called.
});
在 jQuery 对象别名上使用
当$快捷方式不再可用时，$.noConflict()可以用于避免命名空间冲突。然而，传递给.ready()的处理函数可以传递一个引用jQuery对象的参数。这使得处理程序中能够使用jQuery对象，例如，用作$,这样就可以不用关心它的别名：
jq2 = jQuery.noConflict();
jq2(function( $ ) {
// 在这个代码块中可以像往常一样使用 $ ;实际的jQuery 对象是 jq2
});
例子
显示当DOM加载的信息。
<!DOCTYPE html>
<html>
<head>
<style>p { color:red; }</style>
<script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
<script>
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>
参考：