$（window）.load和$（document）.ready有什么区别？

Question 1

最近，我的JavaScript代码遇到了问题，并从我的代码中取出了一部分代码$(document).ready()，并将其放在$(window).load()解决问题的位置。

现在我明白了window.load刚刚解雇后document.ready，但它为什么没有准备好后document.ready，即后window.load()？

Question 2

load当所有资产（包括图像）加载完成时，会调用。ready当DOM准备进行交互时会触发。

加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，并且所有图像和子帧均已完成加载。

从jQuery API文档中，.ready（handler）：

尽管JavaScript提供了呈现页面时执行代码的load事件，但只有在完全接收到所有资产（例如图像）之后，才会触发此事件。在大多数情况下，可以在完全构建DOM层次结构后立即运行脚本。确保传递给.ready（）的处理程序将在DOM准备就绪后执行，因此通常这是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。使用依赖CSS样式属性值的脚本时，在引用脚本之前，请先引用外部样式表或嵌入样式元素，这一点很重要。

Question 3

$(document).ready() 表示页面的DOM已准备好进行操作。

window.load() 整个页面（包括CSS和图像文件之类的组件）完全加载后触发。

您想达到什么目的？

Question 4

$(document).ready(function(){
//code here
});

上面的代码几乎在我们每次使用时都会使用jQuery。

当我们想jQuery在DOM准备好后初始化代码时使用此代码。

$(window).load()

有时您想操纵图片。例如，您要垂直和水平对齐图片，并且需要获取图片的宽度和高度才能做到这一点。用$(document).ready()你将不能够这样做，如果游客不具有已加载的图像，在这种情况下，你需要初始化jquery当图像完成加载对准功能。那就是我们使用的地方$(window).load()

Question 5

$(document).ready 是 jQuery在加载DOM时触发的事件，因此在文档结构就绪时触发。

$(window).load 加载了整个内容（包括CSS，图像等）后，会触发事件。

这是主要区别。

Question 6

$(document).ready() 在包装DOM <body>...</body>

$(window).load() 是文件的木瓜包装所有DOM <html>...</html>

让我们在您的情况下使用以保存渲染处理。

Question 7

简而言之，window.load当加载窗口的所有内容时调用，而document.ready当加载DOM并准备好文档结构时调用。

Question 8

加载状态是在创建窗口对象并且所有必需的组件（包括DOM）已加载到内存中但尚未传递到呈现引擎以在页面中呈现相同对象时的状态。

另一方面，就绪状态可确保将DOM元素，事件和其他相关组件传递到呈现引擎，在页面上呈现，并准备进行交互和操纵。

Question 9

$（document）.ready是比较$（window）.load事件的滑块。
$（document）.ready在加载Dom时触发，但$（window）.load在Dom，css和图像完全加载时触发。

<!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>

展开摘要

Question 10

$(document).ready是一个jQuery事件。一旦加载DOM并准备好通过脚本对其进行操作，它将立即触发。这是页面加载过程中的最早点，脚本可以安全地访问页面html DOM中的元素。在所有图像，css等完全加载之前触发此事件。

window.load() 整个页面（包括CSS和图像文件之类的组件）完全加载后触发。