Question

我有2个问题。首先，这不是我的工作。我目前正在查看其他人的JavaScript文件。我无法提供确切的代码，但我可以展示我在想什么。

在JavaScript文件中，我看到很多$(document).ready。我知道$(document).ready的作用，在加载DOM树时将调用回调函数。是否有人会使用多个$(window).load回调？我不明白这一点。

另外，我看到的另一件事是$(document).ready内的$(document).ready(function() { $(window).load(function() { //... }); });，如下所示：

$(window).load()

据我所知，当加载页面的所有内容时都会调用$(window).load()，例如资源和图片等。我认为$(document).ready是$(window).load之后调用的最后一件事。是否有任何时间$(document).ready被调用$(window).load之前是否有任何理由将$(document).ready置于PS C:\> $postParams = @{eventId='235'} PS C:\> curl -Method DELETE -Uri http://localhost:8080/eventlist/api/v1/events -Body $postParams curl : Error deleting event At line:1 char:1 + curl -Method DELETE -Uri http://localhost:8080/eventlist/api/v1/events -Body $po ... + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : InvalidOperation: (System.Net.HttpWebRequest:HttpWebRequest) [Invoke-WebRequest], Web eption + FullyQualifiedErrorId : WebCmdletWebResponseException,Microsoft.PowerShell.Commands.InvokeWebRequestCommand内？

Answer 1

是的，jQuery授予在ready之前调用load事件的权限。即使在IE8-（其中DOMContentLoaded不受支持），它也可以这样工作。但是让我们看看下面的代码：

<!doctype html>

<title>Ready vs load test</title>

<style>body {white-space: pre}</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script>
  ~function () {
    function log(msg) {
      document.body.innerHTML += msg + "\n";
    }

    function handler(msg) {
      return function () {
        log(msg);
      }
    }

    $(window).load(handler("5. load #1"));
    $(document).ready(handler("1. ready #2"));
    $(window).load(handler("6. load #3"));
    $(document).ready(handler("2. ready #4"));
    $(document).ready(function () {
      log("3. ready #5");
      $(window).load(handler("8. load #6"));
    });
    $(document).ready(handler("4. ready #7"));
    $(window).load(handler("7. load #8"));
  }();
</script>

结果是

1. ready #2
2. ready #4
3. ready #5
4. ready #7
5. load #1
6. load #3
7. load #8
8. load #6

查看第7行和第8行。从load事件附加处理的ready是最后一个。因此，通过使用这种方式，我们可以确保已经调用了所有先前添加的（在脚本解析和执行期间）load处理程序。

所以在$(window).load之外使用$(document).ready并且在内部并没有因为它影响工作原理的方式而改变那么多？

实际上它会影响脚本执行。第一个版本有效，第二个版本没有：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
  $(document).ready(function () {
    $(window).load(function () {
      $.magic.value = 12;
    });
  });
</script>

<script>
  $(window).load(function () {
    $.magic = {};
  });
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
  $(document).ready(function () {
  });

  $(window).load(function () {
    $.magic.value = 12;
  });
</script>

<script>
  $(window).load(function () {
    $.magic = {};
  });
</script>

Answer 2

$（document）.ready已经加载了DOM的所有节点，但不一定是它们的内容，这就是$（window）.load的用途，例如：可以存在一个img-ele，但它的内容 - 图像 - 尚未加载。

所以，你是对的，只使用每个监听器一次，不要嵌套它们。

$（document）.ready中的多个$（document）.ready和$（window）.load

2 个答案: