logo标签列表

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

jquery
257
在jQuery中，$(window).load(function() {})和$(document).ready(function() {})有什么区别？
7
请注意，在jQuery 3.x中没有$(window).load()。请改用$(window).on('load', function(){});。 - JP Zhang
11个回答
296
  • document.ready 是 jQuery 的一个事件，它在 DOM 就绪时触发，例如所有的元素都可以被找到/使用，但不一定是全部的内容。
  • window.onload 会在更晚的时候触发（或在最坏/失败的情况下同时触发），当图片等加载时，因此如果您要使用图像尺寸等信息，通常应该使用这个事件。
47
$(document).ready(function(){}) 的简写是 $(function(){})，与 window.load 的另一个重要区别是它将在所有未来对函数的调用中运行，即使是在初始 DOM 准备就绪之后也是如此。 - Michael Butler
3
我认为onload是$(window).on('load')的缩写，两者都涉及到load事件。 - Free Lancer
5
@MichaelButler - “it will run on ALL future calls of the function” 的意思是“它将在函数的所有未来调用中运行”。 - BornToCode
8
@MichaelButler：你需要在评论中更清楚明确。1）你谈论的是用户在DOM准备就绪后执行更多的$(document).ready代码。这种情况非常小，可能不值得提及而导致混淆。2）环境只会在DOM准备就绪时调用一次$(document).ready(function(){})。如果用户由于某种原因在DOM准备就绪后执行更多的$(document).ready，那么是立即执行。 - Doug S
6
我不同意，迈克尔。让我们就这样了结吧，不要陷入无用的评论中。至少那些困惑的人现在有了答案。 - Doug S
显示剩余4条评论
85
$(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");
});
如果用户点击按钮启动后，Ajax请求完成，'load'会再次执行吗？ - erik-stengel
2
@erik-stengel 不行！ - SagarPPanchal
47

$(window).load()在jQuery 3.0中已经不再可用。

$( window ).load(function() {
        // Handler for .load() called.
});
使用它作为“事件处理程序附加”即可绕过此问题。
$( window ).on("load", function() {
        // Handler for .load() called.
});
20

区别如下：

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

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

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

window.load事件将在所有iframe内容加载完成后触发。

8

$(document).ready 发生在DOM中所有元素都存在时，但不一定是所有内容都存在的情况下。

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

window.onload 或 $(window).load() 发生在所有内容资源（图片等）加载完毕之后。

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

我认为JQuery 3.x不支持$(window).load事件。

1
根据文档，JQuery 3.0已删除$(window).load事件。 - Mathieu VIALES
3
没问题。为了回避这个问题，你可以将其用作“事件处理程序附加”：     $（窗口）。on（“load”，function（）{       //调用.load（）的处理程序。     }）; - Kean Amaral
1

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版本）中可能存在一些怪异行为，但通常在所有浏览器中都能正常工作。

可以在body的onload事件中使用window.load，如下所示（但我强烈建议您避免在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!");
});
1
$(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中被移除。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接