$(document).ready()

最新推荐文章于 2022-05-27 11:42:53 发布

WalkingAlien

最新推荐文章于 2022-05-27 11:42:53 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：网站开发文章标签： jquery 函数文档

本文链接：https://blog.youkuaiyun.com/WalkingAlien/article/details/73501257

网站开发专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了jQuery中$(document).ready()与$(window).on('load')的区别及应用。通过实例演示了这两种方法如何控制页面加载时机，确保用户体验的同时避免加载顺序混乱带来的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

$( document ).ready(function() {
    console.log( "ready!" );
});

在网页文档加载完毕前一个页面是无法安全操纵的。jQuery可以为我们检测到待发状态。

$(document).ready()中的代码在 Document Object Model (DOM) 完毕后会立即执行。

$( window ).on( “load”, function() { … })中的代码需要在全部页面（图片或框架等）完毕后才会执行，而不仅仅是DOM。

简写：

$(function() {
console.log( “ready!” );
});

调用命名函数

function readyFn( jQuery ) {
    // 文档加载后执行的代码
}
$( document ).ready( readyFn );
// 或：
$( window ).on( "load", readyFn );

测试
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        console.log( "document loaded" );
    });

    $( window ).on( "load", function() {
        console.log( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://techcrunch.com"></iframe>
</body>
</html>

运行后在控制台可以看出，在页面还是空白的时候已经”document loaded”了，等行内框架加载好后，才“window loaded”。
这里写图片描述

优点：

执行时机
使用 $(document).ready()，你能让你的事件在window加载之前加载或触发。所有你写在这个方法里面的都准备在最早的时刻加载或触发。也就是说，一旦DOM在浏览器中注册后，$(document).ready()里的代码就开始执行。这样用户在第一眼看见页面元素时，特效就可以运行了。

多次执行
window.onload事件每次只能保存对一个函数的引用，他会覆盖掉之前的函数，所以不能再现有行为上添加新的行为。如果引用了多个js文件，每个都需要window.onload方法就导致编码复杂。

使用$(document).ready()方法能够很好地解决这种问题，每次调用$document.ready()方法都会在现有行为上追加新的行为，这些行为会根据注册顺序依次执行。

function say(str){
    alert(str)
}
$(document).ready(function(){
    say('hello')
})
$(document).ready(function(){
    say('jQuery')
})
//依次弹出hello jQuery