DOMContentLoadedイベントとloadイベントの違い

DOMContentLoadedとloadイベントの違いは何ですか？

Mozillaのデベロッパーセンター：

DOMContentLoadedイベントは、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに、ドキュメントが完全に読み込まれて解析されたときに発生します（loadイベントを使用して、完全に読み込まれたページを検出できます）。

DOMContentLoadedイベントは、すぐにDOM階層が完全に構築されているように、発火するloadすべての画像とサブフレームが完成ロードを持っている場合、イベントがそれを行います。

DOMContentLoaded最新のほとんどのブラウザで動作しますが、IE9以上を含むIEでは動作しません。jQueryライブラリで使用されているような古いバージョンのIEでこのイベントを模倣するいくつかの回避策があり、IE固有の onreadystatechangeイベントをアタッチします。

違いを自分で確認してください：

デモ

Microsoft IEから

DOMContentLoadedイベントは、現在のページの解析が完了すると発生します。loadイベントは、広告や画像を含むすべてのリソースからすべてのファイルの読み込みが完了すると発生します。DOMContentLoadedは、UI機能を複雑なWebページに接続するために使用する優れたイベントです。

Mozilla Developer Networkから

DOMContentLoadedイベントは、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに、ドキュメントが完全に読み込まれて解析されたときに発生します（loadイベントを使用して、完全に読み込まれたページを検出できます）。

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

ドキュメントは「準備ができる」までは、ページを安全に操作できません。jQueryはこの準備状態を検出します。$（document）.ready（）内に含まれるコードは、ページのドキュメントオブジェクトモデル（DOM）がJavaScriptコードを実行する準備ができて初めて実行されます。$（window）.load（function（）{...}）内に含まれるコードは、DOMだけでなくページ全体（画像またはiframe）の準備ができると実行されます。

参照：http : //learn.jquery.com/using-jquery-core/document-ready/

• domContentLoaded：DOMの準備ができており、JavaScriptの実行をブロックしているスタイルシートがない場合のポイントをマークします。つまり、レンダーツリーを（潜在的に）構築できるようになります。多くのJavaScriptフレームワークは、独自のロジックの実行を開始する前にこのイベントを待機します。このため、ブラウザーはEventStartおよびEventEndタイムスタンプをキャプチャして、この実行にかかった時間を追跡できるようにします。

• loadEvent：すべてのページ読み込みの最後のステップとして、ブラウザーは「onload」イベントを発生させ、追加のアプリケーションロジックをトリガーできます。

ソース

これが私たちのために働くいくつかのコードです。MSIEはでヒットしたり失敗したりすることがわかりました。DomContentLoaded追加のリソースがキャッシュされていない場合（コンソールのログに基づいて最大300ミリ秒）に遅延があり、それらがキャッシュされるとトリガーが速すぎます。そこで、MISEのフォールバックに頼りました。また、外部JSファイルの前または後のdoStuff()どちらでDomContentLoadedトリガーするかに関係なく、関数をトリガーする必要があります。

// detect MSIE 9,10,11, but not Edge
ua=navigator.userAgent.toLowerCase();isIE=/msie/.test(ua);

function doStuff(){
    //
}
if(isIE){
    // play it safe, very few users, exec ur JS when all resources are loaded
    window.onload=function(){doStuff();}
} else {
    // add event listener to trigger your function when DOMContentLoaded
    if(document.readyState==='loading'){
        document.addEventListener('DOMContentLoaded',doStuff);
    } else {
        // DOMContentLoaded already loaded, so better trigger your function
        doStuff();
    }
}