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

Question

我有兩個問題。 首先，這不是我的工作。 我目前正在查看其他人的JavaScript文件。 我不能給出確切的代碼，但我可以展示我在想什么。

在JavaScript文件中，我看到很多$(document).ready(function(){}); 。 我知道$(document).ready作用，在加載DOM樹時將調用回調函數。 是否有人會使用多個$(document).ready回調？ 我不明白這一點。

另外，我看到的另一件事是在$(document).ready的$(window).load ，如下所示：

$(document).ready(function() {
    $(window).load(function() {
         //...
    });
});

據我所知，當頁面的所有內容都被加載時會調用$(window).load() ，比如資源和圖像等。我認為$(window).load()是最后調用的東西，在$(document).ready 。 是否有任何時候$(window).load被調用BEFORE $(document).ready並且你有什么理由將$(window).load放在$(document).ready嗎？

Answer 1

是的，jQuery授予在load之前調用ready事件。 即使在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行。從ready事件附加的load是最后一個。 因此，通過使用這種方式，我們可以確保已經調用了之前添加的所有內容（在腳本解析和執行期間） load處理程序。

所以在$(document).ready和inside之外使用$(window).load並沒有改變它影響工作原理的方式嗎？

實際上它會影響腳本執行。 第一個版本有效，第二個版本沒有：

 <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 個解決方案

解決方案1
3 已采納 2017-02-20 09:59:29

解決方案2
0 2017-02-20 09:58:17

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

問題描述

2 個解決方案

解決方案1 3 已采納 2017-02-20 09:59:29

解決方案2 0 2017-02-20 09:58:17

解決方案1
3 已采納 2017-02-20 09:59:29

解決方案2
0 2017-02-20 09:58:17