web-dev-qa-db-ja.com

$（document）.readyの前にwindow.onloadイベントが発生するのはなぜですか？

このスレッドで述べられているように： window.onload vs $（document）.ready（） 。 _window.onload_は$(document).ready()より後に発生する必要がありますが、この単純なコードでは、ログはonloadイベントがreadyイベントの前に実行されたことを示しますか？私はここで何が欠けていますか？

_<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
  <h1>A Simple Site</h1>
  <script>
    $(document).ready(function() {
      console.log("ready event fired");
    })
     window.onload = function() {
      console.log("onload event fired");
    }
  </script>
</body>

</html>_
javascriptjqueryonloaddocument-ready
11
Hoang Vu

問題はイベントの順序ではありません。ネイティブDOMイベントのjQueryラッパーを使用します。ネイティブのDOMContentLoadedを試してみると、常に_window.onload_の前に実行されていることがわかります。ただし、jQueryイベント$(document).readyはDOMContentLoadedの数ミリ秒後に発生します。これは、場合によっては_window.onload_の後に発生することもあります。特に、ページの読み込みがそれほど多くない場合は以下のコード。これは、jQueryの実装による遅延です。

ただし、コード内のiframeのコメントを解除すると、読み込みに時間がかかり、_window.onload_が遅延するため、$(document).readyが最初に表示されます。

_<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
    <h1>A Simple Site</h1>
    <!-- <iframe src="http://stackoverflow.com"></iframe> -->
    <script>
        $(document).ready(function() {
            console.log("jQuery ready");
        })
        
        document.addEventListener("DOMContentLoaded", function(event) {
            console.log("DOM ready");
        });
        
        window.onload = function() {
            console.log("DOM loaded");
        }
    </script>
</body>
</html>_
11
Gaafar

@RoryMcCrossanによると、正しいと言っています。htmlには、window like（image、videoなど）にロードするものがありません。これで、イベントの動作がどのように変化するかを確認できます

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <img src="http://www.wallpapereast.com/static/images/Unique-And-Beautiful-Wallpaper-HD.jpg" alt="Alternate Text" />

  
</head>

<body>
  <h1>A Simple Site</h1>
  <script>
    $(document).ready(function() {
      console.log("ready event fired");
    })
     window.onload = function() {
      console.log("onload event fired");
    }
  </script>
</body>

</html>
1
Bharat

これはjQuery3の「機能」です。jQuery1.Xには常に $（window）.on（ 'load'）の前に$（document）.readyが処理されます。さらに、$（window）.load（）は、ページがレンダリングされるときのイベントと見なすことができます。ほぼ10年間jQuery1.Xで安定して動作しているプロジェクトで、jQueryバージョンを3.Xにアップグレードしようとしたばかりなので、これについては100％確信しています。したがって、この試みは、$（document）.readyと$（window）.loadに苦しんでいる1か月の頭痛の種になりました。最終的に、最新の1.X世代であるjQuery1.12.4を残すことが決定されました。

0
Ilya Eliseev