71

最近我的 JavaScript 代码出现了问题，我从我的代码中取出了一部分代码$(document).ready()并将其放入$(window).load()解决了这个问题。

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

4

9 回答 9

75

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

从 MDC，window.onload：

load 事件在文档加载过程结束时触发。至此，文档中的所有对象都在 DOM 中，所有图片和子帧都加载完毕。

从 jQuery API 文档中，.ready(handler)：

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

于 2011-03-03T14:30:34.880 回答
27

$(document).ready()意味着您的页面的 DOM 已准备好进行操作。

window.load()当整个页面（包括 CSS 和图像文件等组件）已完全加载时触发。

你想达到什么目的？

于 2011-03-03T14:31:30.433 回答
8 
$(document).ready(function(){
//code here
});

上面的代码几乎每次我们使用jQuery.

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

$(window).load()

有时你想操纵图片。例如，您想要垂直和水平对齐图片，您需要获取图片的宽度和高度才能做到这一点。$(document).ready()如果访问者没有加载图像，您将无法执行此操作，在这种情况下，您需要在图像完成加载时初始化对齐jquery功能。这就是我们使用的地方$(window).load()

于 2011-03-03T14:32:24.507 回答
7

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

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

这是主要区别。

于 2013-04-05T05:52:49.403 回答
4

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

$(window).load()是文档的爸爸将所有 DOM 包装在<html>...</html>

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

于 2015-01-16T03:45:22.707 回答
2

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

于 2017-01-17T09:11:29.393 回答
1

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

另一方面，就绪状态确保将 DOM 元素、事件和其他相关组件传递给渲染引擎，在页面上渲染，并准备好进行交互和操作。

于 2016-07-25T13:07:15.347 回答
1

  1. 与 $(window).load 事件相比，$(document).ready 是滑块快。

  2. $(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>

于 2017-10-08T15:24:44.877 回答
-1

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

window.load()当整个页面（包括 CSS 和图像文件等组件）已完全加载时触发。

于 2017-12-22T06:19:58.337 回答