我们知道，JavaScript中有一个window.onload=function(){}入口函数可以等整个页面加载完再执行函数里面的内容。JQuery中也有这么一个函数：$(document).ready(function(){})，可以简写为$(function(){})。但是这两个函数有两点区别：
1、window.onload=function(){}会等待整个页面（包括视频、音乐、图片等多媒体文件）加载完毕再执行；
而$(document.).ready(function(){})等待dom树结构（不包括视频、音乐、图片等多媒体文件）加载完毕就执行。
2、一个页面只能写一个window.onload=function(){}，如果重复写多个，那么最后一个window.onload=function(){}才有效；
而一个页面可以写多个$(document).ready(funciton(){})，每一个都有效。
示例：我这里用了一张2.2MB的图片，所以不会一下子加载完。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
window.onload=function () {
console.log("整个页面加载完毕")
}
$(document).ready(function () {
console.log("dom树结构加载完毕")
});
</script>
</head>
<body >
<img src="2.png" onload="console.log('图片加载完毕');"/>
</body>
</html>
运行结果：
可以看出，当dom树结构加载完毕时，就会执行$(document).ready()的内容，当整个页面（包括图片）加载完毕之后才会执行window.onload。