$(window).load()和$(document).ready()函数之间的区别


216

$(window).load(function() {})$(document).ready(function() {})jQuery有什么区别?

Answers:


266
  • document.ready是jQuery事件,它在DOM准备就绪时运行,例如,所有元素都可以在其中找到/使用,但不一定是所有内容
  • window.onload加载图像等时稍后触发(或在最坏/失败的情况下同时触发),因此,例如,如果您使用图像尺寸,则通常要使用它。

38
简写$(document).ready(function(){})$(function(){})和window.load的另一个重要区别是,即使在初始DOMready之后,它也将在该函数的所有将来调用上运行。
Michael Butler

2
@dbliss是的,我相信onload是的简写$(window).on('load')。两者都引用load事件。
自由蓝瑟

5
@MichaelButler-你是什么意思it will run on ALL future calls of the function
BornToCode

7
@MichaelButler:您需要在评论中更加清楚。1)您所谈论的$(document).ready是DOM准备就绪后,USER执行更多代码。那是一个很小的用例,可能不值得让每个人都提及它而感到困惑。2)$(document).ready(f‌​unction(){})当DOM准备就绪时,环境仅调用一次。如果用户由于某种原因$(document).ready在DOM准备就绪后执行更多操作,那么可以,它将立即执行。
Doug S

4
迈克尔,我希望与众不同。让我们就此解决,不要退化为无用的注释。至少困惑的人们现在有了答案。
Doug S

73
$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});

22

$(window).load()jQuery的3.0不可用

$( window ).load(function() {
        // Handler for .load() called.
});

为了解决这个问题,您可以将其用作“事件处理程序附件”

$( window ).on("load", function() {
        // Handler for .load() called.
});

14

区别是:

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

$(window).load() 加载整个内容后会触发事件。


9
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://stackoverflow.com"></iframe>
</body>
</html>

加载所有iframe内容后,将触发window.load


7

$(document).ready 当所有元素都存在于DOM中(但不一定是所有内容)时,就会发生这种情况。

$(document).ready(function() {
    alert("document is ready");
});

window.onload$(window).load()在加载所有内容资源(图像等)之后发生。

$(window).load(function() {
    alert("window is loaded");
});


0

document.ready(jQuery) document.ready将在加载HTML文档属性后立即执行,并且DOM准备就绪。

DOM:文档对象模型(DOM)是一种跨平台且独立于语言的约定,用于表示HTML,XHTML和XML文档中的对象并与之交互。

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

window.load(内置JavaScript) 然而window.load将等待页面完全加载,其中包括内部框架,图像等。* window.load是内置的JavaScript方法,已知其中有一些在旧的浏览器(IE6,IE8,旧的FF和Opera版本)中会出现古怪的现象,但通常在所有浏览器中都可以使用。

window.load可以像这样在正文的onload事件中使用(但我强烈建议您避免在HTML中混合这样的代码,因为稍后它会引起混淆):

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});

0

$(window).load是一个事件,当DOM和页面上的所有内容(所有内容)(如CSS,图像和框架)完全加载时将触发此事件。最好的例子是,如果我们想获取实际的图像尺寸或获取我们使用它的任何东西的细节。

$(document).ready()表示,一旦DOM被加载并准备好被脚本处理,就需要执行其中的代码。它不会等待图像加载以执行jQuery脚本。

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$(window).load在$(document).ready()之后触发。

$(window).load在1.8中已弃用,并在jquery 3.0中删除


0

我认为$(window).loadJQuery 3.x不支持该事件


1
根据文档,$(window).load事件已在JQuery 3.0中删除
Mathieu VIALES

1
这是对的。为了解决该问题,您可以将其用作“事件处理程序附件”:$(window).on(“ load”,function(){//调用.load()的处理程序。
基恩·阿玛拉尔

0

根据DOM Level 2事件,该load事件应该在document而非上触发window。但是,在所有浏览器中都load实现window了向后兼容性。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.