jQuery - $(document).ready 和 $(window).load 之间有什么区别

Java

在使用jQuery时，我们经常会遇到两个常用的函数，即$(document).ready和$(window).load。这两个函数在页面加载时执行JavaScript代码，但它们之间有一些区别。

$(document).ready是jQuery提供的一个事件处理函数，当DOM树构建完毕时就会触发该事件。这意味着在这个事件处理函数中，我们可以安全地操作DOM元素，而无需担心DOM元素是否已经加载完毕。$(document).ready函数通常用于在页面加载完毕后执行一些初始化代码，如绑定事件处理函数、修改DOM元素的样式等。

$(window).load也是一个事件处理函数，但它在页面中所有的资源（包括图片、CSS文件、JavaScript文件等）都加载完毕后才会触发。这意味着$(window).load函数会等待页面中所有的资源加载完成后再执行相应的代码。因此，如果我们需要在页面加载完毕后操作一些需要依赖资源加载的元素，如图片的宽高等，就可以使用$(window).load函数。

下面我们通过一个案例来更好地理解这两个函数之间的区别。假设我们有一个页面，其中包含一个图片和一个按钮。我们希望在页面加载完毕后，按钮的背景颜色变为红色，而图片的宽度和高度显示在页面上。

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
  <script>
    $(document).ready(function() {
      // 在$(document).ready函数中设置按钮的背景颜色为红色
      $("#myButton").CSS("background-color", "red");
    });
    $(window).load(function() {
      // 在$(window).load函数中获取图片的宽度和高度，并显示在页面上
      var width = $("#myImage").width();
      var height = $("#myImage").height();
      $("#dimensions").text("图片的宽度为：" + width + "，高度为：" + height);
    });
  </script>
</head>
<body>
  <button id="myButton">按钮</button>
  <img id="myImage" src="example.jpg" alt="示例图片">
  
<img src="https://img.izhida.com/topic/2c56c360580420d293172f42d85dfbed.jpg" alt="CSS"><br>CSS
</body>
</html>

在上面的代码中，我们通过$(document).ready函数将按钮的背景颜色设置为红色。这个操作不需要依赖图片的加载，所以可以放在$(document).ready函数中。而在$(window).load函数中，我们获取了图片的宽度和高度，并将其显示在页面上。这个操作需要等待图片加载完成后才能获取到正确的宽度和高度，所以放在$(window).load函数中。

通过上述案例，我们可以看出$(document).ready和$(window).load之间的区别。前者在DOM树构建完毕后就会执行，而后者要等待页面中所有资源加载完成后才会执行。根据实际需求，我们可以选择不同的函数来执行相应的代码。