我最近遇到了一个问题，我的JavaScript代码并从我的$(document).ready()中取出一部分代码并将其放在$(window).load()中修复了问题。
现在我明白window.load是在document.ready之后被解雇的，但为什么在document.ready之后没有准备好，那是在window.load()之后？
所有资产加载完成后都会调用load，包括图像。当DOM准备好进行交互时，会触发ready。
来自MDC，window.onload：
load文件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，并且所有图像和子帧都已完成加载。
从jQuery API文档中，.ready( handler )：
虽然JavaScript提供了在呈现页面时执行代码的加载事件，但在完全接收到所有资产（如图像）之前，不会触发此事件。在大多数情况下，只要完全构造DOM层次结构，就可以运行脚本。传递给.ready（）的处理程序保证在DOM准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。使用依赖于CSS样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素很重要。
$(document).ready()意味着您的页面的DOM已准备好进行操作。
当整个页面（包括CSS和图像文件等组件）已完全加载时，会触发window.load()。
你想要实现什么目标？
$(document).ready(function(){
//code here
});
几乎每次我们使用jQuery时都会使用上面的代码。
当我们想要在DOM准备好之后初始化我们的jQuery代码时使用此代码。
$(window).load()
有时你想操纵图片。例如，您想要垂直和水平对齐图片，您需要获取图片的宽度和高度才能执行此操作。使用$(document).ready()，如果访问者没有已加载图像，您将无法执行此操作，在这种情况下，您需要在图像完成加载时初始化jquery对齐功能。这就是我们使用$(window).load()的地方
$(document).ready是在加载DOM时触发的jQuery事件，因此在文档结构准备好时会触发它。
加载完整内容（包括css，图像等）后，$(window).load事件被触发。
这是主要的区别。
$(document).ready()是在<body>...</body>中包装DOM
$(window).load()是<html>...</html>文件包装所有DOM的爸爸
让我们在你的情况下使用来保存渲染处理。
简单来说，当加载窗口的所有内容时调用window.load，而在加载DOM并且文档结构准备就绪时调用document.ready。
加载状态是创建窗口对象并且所有必要组件（包括DOM）已加载到内存中但尚未传递到呈现引擎以在页面中呈现相同内容时的状态。
另一方面，就绪状态确保将DOM元素，事件和其他依赖组件传递给呈现引擎，在页面上呈现，并准备好进行交互和操作。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js" ></script>
<script>
$(window).load(function () {
var img = $('#img1');
alert( "Image Height = " + img.height() + "<br>Image Width = " + img.width());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d" />
</div>
</form>
</body>
</html>$(document).ready是一个jQuery事件。一旦加载DOM并准备好由脚本操作它就会触发它。这是页面加载过程中最早的一点，脚本可以安全地访问页面的html DOM中的元素。在所有图像，css等完全加载之前触发此事件。
当整个页面（包括CSS和图像文件等组件）已完全加载时，会触发window.load()。