jQuery ready() 学习笔记

jQuery 基础知识 - $(document).ready()

・$(document).ready() 函数说明

在说明如何使用前，先来看看 ready() 函数的完整代码。

$(document).ready(function() {
  // 需要在HTML加载后，执行的处理
});

上面的代码意味着一旦 HTML=DOM 完成加载后（不包括图像等），function() 函数中的处理（=需要在HTML加载后，执行的处理）将被执行。

如果 jQuery (JavaScript)在 HTML 完全加载之前被执行，某些处理可能会无法正常工作。所以需要使用 ready() 函数等待 HTML 加载完成。

以下三种写法的效果是相同的，都是在HTML加载完成后执行处理。


$(function() {
  // 需要在HTML加载后，执行的处理
});

jQuery(document).ready(function() {
  // 需要在HTML加载后，执行的处理
});

jQuery(function() {
  // 需要在HTML加载后，执行的处理
});

顺便说一句，没有必要像这样写多次ready()函数。


$(document).ready(function(){
  $(".cssName").smoothScroll();
});

$(document).ready(function(){
  $("#idName").slider();
});

$(document).ready(function(){
  $("#navName").nav();
});

您可以像下面这样把它们写在一起，我认为这样的代码管理起来更简单一些。


$(document).ready(function(){
  $(".cssName").smoothScroll();
  $("#idName").slider();
  $("#navName").nav();
});

// 或者

$(function(){
  $(".cssName").smoothScroll();
  $("#idName").slider();
  $("#navName").nav();
});

・与 $(window).load 函数的区别

当页面的所有元素（包括图像）加载完成后，会触发 $(window).load() 函数事件。

・页面中各个事件的执行顺序如下：

1. 页面开始加载

2. HTML 加载完成

3. $(document).ready() 函数执行

4. 包括图像在内的所有内容已完成加载。

5. $(window).load() 函数被执行

$(window).load() 函数最后执行。如果需要加载的页面内容过多，则可能需要花费一些时间。

因此，一般情况下，如果不需要处理图片等的内容时，我认为对用户友好的话，使用 $(document).ready() 函数会更好。

・需要使用 $(window).load() 函数的情况

对于 jQuery 和 JavaScript 在页面没有完全加载时，如果执行某些处理，可能会导致某些处理无法正常执行。

但假设有一个插件需要对图像执行一些处理，并测量图像的宽度和高度后来执行某些处理。如果图像未完全加载，则无法确定宽度和高度，这时如果使用 $(document).ready() 函数来执行该过程，则会出现故障； $(window).load() 函数则会在图像加载完成后执行该处理，则会正常执行。

・ready() 函数的完整示例

我们来看看一个完整的代码示例，来加深理解。

下面的代码也可以在w3schools.com的网上编辑器进行测试。


<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

    <p id="readyRun">ready()函数执行前。<p>
    <p id="hideShow">隐藏・显示的展示用段落。</p>

    <button>隐藏・显示上面的段落</button>

    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("#hideShow").slideToggle();
            });

            // 页面加载完成后，变更段落里面的内容
            $("#readyRun").text("页面已完成加载，ready()函数已执行成功。");
        });
    </script>
</body>
</html>