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

このスレッドに記載されている通り：window.onload vs $(document).ready()。 window.onloadは$(document).ready()より後で発生するはずですが、この単純なコードでは、準備完了イベントの前にonloadイベントが実行されていることを示すログが表示されますか？私はここで何が欠けているのですか？

<!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>

出典

2016-11-15 Hoang Vu

あなたはロードイベント（すなわち、外部CSSや画像）に影響を与えるページには内容がありませんので、 'load'イベントはほぼ瞬時に起動します。 jQueryの固有のオーバーヘッドのために、jQueryのdocument.readyイベントの前に起動すると思います。あなたのHTMLに 'img'を追加すると、準備が整ったハンドラが最初に起動します。 –

@BharatPatidarこれは、オペレータが問題にしている問題です。その問題は、その動作がOPのものとは逆のものでなければならないと述べています - この質問の全体点です –

@RoryMcCrossanはい、あなたの最初のコメントに同意します – Bharat

どのように変化するかを見ることができます。これは、ネイティブ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>

出典

2016-11-20 20:44:59 Gaafar

@RoryMcCrossanのことわざは右である、あなたは（画像、動画など）のようなwindowの負荷であるためにあなたのhtmlには何もありません。今、あなたは、イベントの動作は問題はイベントの順序ではない

<!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>

出典

2016-11-15 11:45:09 Bharat

私はあなたのコードを試しました。最初のイメージだけを読み込むと、その動作は期待どおりではありません。これについて何か説明がありますか？ –

@HoangVuこれで、イメージが1つしか表示されず、 'ready'の後に' onload'イベントが発生していることが分かりました。画像サイズが小さかったので、準備が整うのに 'DOM'が必要な時間がかかりませんでした。 – Bharat

@BharatPatridar画像のサイズ/量は重要ですが、それは' onload'イベントが必要ないことを意味します'DOM'が完全にロードされるのを待つか、' ready'イベントはイメージなしで 'onload'以上の何かを待っていますか？ –

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

答えて

関連する問題