window.onload対$（document）.ready（）

回答:

1243

このreadyイベントは、HTMLドキュメントが読み込まれたonload後に発生しますが、すべてのコンテンツ（画像など）も読み込まれた後に発生します。

onload一方、イベントは、DOMにおける標準イベントであるreadyイベントはjQueryのに固有のものです。readyイベントの目的は、ドキュメントが読み込まれた後できるだけ早く発生するようにすることです。これにより、ページの要素に機能を追加するコードは、すべてのコンテンツが読み込まれるのを待つ必要がなくなります。

— グッファ
ソース
153
@baptx：あなたは間違っています。readyイベントがあるのjQueryに固有。DOMContentLoadedブラウザで利用できる場合はイベントを使用し、そうでない場合はエミュレートします。DOMContentLoadedイベントはすべてのブラウザでサポートされているわけではないため、DOMに完全に対応するものはありません。
— Guffa
18
わかりましたが、DOMContentLoadedでも同じ結果が得られます。おそらくこれを指定する必要があったでしょう
— baptx '19
55
@baptx：私はそれが質問に関係があるとは思わなかった、そして私はまだそうではない。
— Guffa
17
なぜ反対票か。あなたが間違っていると思うのは何かを説明しないと、答えを改善することはできません。
— Guffa
4
のようなイベントはありませんonload。イベントがトリガーonloadされたときに呼び出される関数を格納するオブジェクトプロパティの名前ですload。
— Scott Marcus
140

window.onloadは組み込みのJavaScriptイベントですが、その実装にはブラウザー（Firefox、Internet Explorer 6、Internet Explorer 8、Opera）間で微妙な違いがあるため、jQueryはそれらを抽象化し、ページのDOMの準備ができるとすぐに起動します（画像などを待ちません）。document.ready

$(document).ready（それはだことに注意してくださいいない document.ready定義されていない、）jQueryの機能、ラッピングや提供している一貫性を次のイベントへ：

  • document.ondomcontentready/ document.ondomcontentloaded-ドキュメントのDOMが読み込まれたときに起動する新しいイベント（画像などが読み込まれる前に時間がかかる場合があります）。繰り返しになりますが、Internet Explorerと他の地域では少し異なります
  • そして、window.onload（でも古いブラウザで実装されている）、これは火災時にページ全体のロード（画像、スタイル、など）
— Piskvorが建物を出た
ソース
16
ここには少し誤解があります。のloadイベントは、windowブラウザ間で一貫して一貫して実装されています。jQueryと他のライブラリが解決しようとしている問題は、あなたが言及した問題です。つまり、load画像やスタイルシートなどのすべての依存リソースが読み込まれるまでイベントは発生しません。これは、DOMが完全に読み込まれた後、長時間かかる可能性があります。レンダリングされ、対話の準備ができています。DOMの準備ができたときにほとんどのブラウザで発生するイベントは呼び出されますがDOMContentLoaded、呼び出されませんDOMContentReady。
— ティムダウン
2
@ティムダウン：ここでのキーワードは合理的です。少なくとも一部のオブジェクトスニッフィングが必要でしたonload（FF / IE / Operaには違いがあります）。に関してはDOMContentLoaded、あなたは完全に正しいです。明確にするための編集。
— Piskvorは
どんな種類のオブジェクトスニッフィングを意味しますか？
— Tim Down
1
@ティム・ダウン：私はOpera にそれがあったことを知っていますが、その上のイベント・トリガーは少し風変わりでした（確実にトリガーするためdocument.onloadに、使用できました）。window.onloadに関する限り：window.onload = fn1;window.onload=fn2;-fn2のみがonloadで呼び出されます。一部の無料のウェブホストは、独自のコードをドキュメントに挿入しますが、ページ内のコードを壊してしまうこともあります。
— Piskvorが
1
「document.ready」の記述が間違っていませんか？documentオブジェクトにはreadyメソッドがありません。jQueryオブジェクトは、$（document）呼び出しから返されます。これが非常に混乱するので、私が正しい場合はこの回答を編集してください。
— A.サライ2014年
87

$(document).ready()jQueryイベントです。JQueryの$(document).ready()メソッドは、DOMの準備ができるとすぐに呼び出されます（つまり、ブラウザーがHTMLを解析してDOMツリーを構築したことを意味します）。これにより、ドキュメントを操作する準備ができ次第、コードを実行できます。

たとえば、ブラウザがDOMContentLoadedイベントをサポートしている場合（IE以外の多くのブラウザがサポートしているように）、そのイベントで起動します。（DOMContentLoadedイベントはIE9 +のIEにのみ追加されたことに注意してください。）

これには2つの構文を使用できます。 

$( document ).ready(function() {
   console.log( "ready!" );
});

または簡略版：

$(function() {
   console.log( "ready!" );
});

の主なポイント$(document).ready()：

  • 画像が読み込まれるのを待ちません。
  • DOMが完全に読み込まれたときにJavaScriptを実行するために使用されます。ここにイベントハンドラを配置します。
  • 複数回使用できます。
  • 「$が定義されていません」$と表示さjQueryれたら、に置き換えます。
  • 画像を操作したい場合は使用しません。$(window).load()代わりに使用してください。

window.onload()ネイティブJavaScript関数です。このwindow.onload()イベントは、DOM（ドキュメントオブジェクトモデル）、バナー広告、画像など、ページのすべてのコンテンツが読み込まれたときに発生します。2つ間のもう1つの違いは、複数の$(document).ready()機能を持つことができる一方で、1つの機能しか持てないことonloadです。

— ジェームズドリンカード
ソース
4
マイナーポイント：IEの議論は言葉遣いが不十分です。ドキュメントのreadyStateが完了するまで、IE（8以前）は「安全に起動できません」というわけではなく、IEにDOMContentLoadedイベントがなかったということです。「安全性」の問題ではなく、IE 9で追加されたIEの欠落機能
— ToolmakerSteve
あなたは正しいので、あなたのコメントと感謝を反映するように答えを編集しました！
— ジェームズドリンカード
「画像が読み込まれるのを待ちません」と言います。他のファイルはどうですか、jsは最も重要ですか？多くの場合、別のファイルから関数を呼び出す前に-それがロードされているかどうかを知る必要があります。
— Darius.V 2015
これは完全に別のトピックですが、私があなたが何を求めているかを理解している場合、それは、jsファイルを配置する順序を含め、ページの構造に基づいています。詳細へのリンクは次のとおりです。ablogaboutcode.com / 2011/06/14 / … HTH、James
— James
なぜ誰かが$（document）.ready（）を複数回使用したいのですか？
— Usman
43

A Windowsのロード、ページ上のすべてのコンテンツが完全にDOM（ドキュメントオブジェクトモデル）コンテンツを含むロードされているイベントが発生し、非同期のJavaScript、フレームと画像。body onload =を使用することもできます。どちらも同じです。window.onload = function(){}そして、<body onload="func();">同じイベントを使用してのさまざまな方法があります。

jQuery$document.ready関数イベントは少し前に実行さwindow.onloadれ、DOM（Documentオブジェクトモデル）がページに読み込まれると呼び出されます。画像やフレームが完全に読み込まれるのを待ちません。

次の記事から撮影： どのように$document.ready()異なっていますwindow.onload()

— ビベック
ソース
これが一番の答えだと思います！
— Haoyu Chen、2015
3
それが一語一句コピーされていなければ、私は同意するかもしれません。
— Kevin B
23 

$(document).ready(function() {

    // Executes when the HTML document is loaded and the DOM is ready
    alert("Document is ready");
});

// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {

     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
スニペットを展開

— dev4092
ソース
22

$(document).ready()Internet Explorer での使用に関する注意事項。ドキュメント全体が読み込まれる前に HTTPリクエストが中断された場合（たとえば、ページがブラウザにストリーミングされている間に別のリンクがクリックされた場合）、IEは$(document).readyイベントをトリガーします。

$(document).ready()イベント内のコードがDOMオブジェクトを参照している場合、それらのオブジェクトが見つからない可能性があり、Javascriptエラーが発生する可能性があります。それらのオブジェクトへの参照を保護するか、それらのオブジェクトを参照するコードをwindow.loadイベントに延期してください。

他のブラウザ（特にChromeとFirefox）でこの問題を再現できませんでした

— デッキ
ソース
どのバージョンのIEですか？互換性を気にする必要があることはわかっていますが、IEを使用するのは難しいです。JavaScriptのみにdocument.readyを使用することは許容されますか？
— モニカ
1
IE6、7、および8を参照してください：stackoverflow.com/questions/13185689/...
— ジェームズDrinkard
22

少しヒント：

window.addEventListenerイベントをウィンドウに追加するには、常にを使用します。その方法では、さまざまなイベントハンドラーでコードを実行できます。

正しいコード：

window.addEventListener('load', function () {
  alert('Hello!')
})

window.addEventListener('load', function () {
  alert('Bye!')
})
スニペットを展開

無効なコード：

window.onload = function () {
  alert('Hello!') // it will not work!!!
}

window.onload = function () {
  alert('Bye!') 
}
スニペットを展開

これは、onloadがオブジェクトのプロパティであり、上書きされるためです。

と同様にaddEventListener、$(document).ready()onloadよりも使用することをお勧めします。

— ИльяЗеленько
ソース
3
これは尋ねられた質問には答えません。
17

イベント

$(document).on('ready', handler)jQueryからreadyイベントにバインドします。このハンドラは、DOMが読み込まれるときに呼び出されます。画像などのアセットがまだ不足している可能性があります。バインディング時にドキュメントの準備ができている場合は呼び出されません。jQueryはそのためにDOMContentLoaded -Eventを使用し、利用できない場合はそれをエミュレートします。

$(document).on('load', handler)サーバーからすべてのリソースが読み込まれると発生するイベントです。画像が読み込まれます。一方でonloadイベントが生のHTMLイベントで、準備は jQueryので構築されています。

機能

$(document).ready(handler)実際は約束です。呼び出し時にドキュメントの準備ができている場合、ハンドラーはすぐに呼び出されます。それ以外の場合は、ready-Event にバインドします。

jQuery 1.8より前$(document).load(handler)は、のエイリアスとして存在していました$(document).on('load',handler)。

参考文献

— アブストラクター
ソース
$（document）.load（handler）がload-eventへのバインディングと同じように動作することを説明してください。$ .fn.readyとは異なり、すぐに呼び出されませんか？
— Nabeel Khan、2016
$.fn.loadイベントバインダーとして動作しないことで混乱したと思います。実際、jquery 1.8以降は使用されていません。私はそれに応じて更新しました
— abstraktor
16

これ$(document).ready()は、HTMLドキュメントが完全に読み込まれたときに発生するjQueryイベントです。一方、window.onloadイベントは、ページ上の画像を含むすべてが読み込まれたときに発生します。

また、window.onloadはDOMの純粋なjavascript $(document).ready()イベントですが、イベントはjQueryのメソッドです。

$(document).ready() 通常は、jQueryで使用されるすべての要素が読み込まれるようにするためのjQueryのラッパーです...

jQueryソースコードを見て、それがどのように機能するかを理解します。

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {

        readyList = jQuery.Deferred();

        // Catch cases where $(document).ready() is called after the browser event has already occurred.
        // we once tried to use readyState "interactive" here, but it caused issues like the one
        // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
        if ( document.readyState === "complete" ) {
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready );

        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed, false );

        // If IE event model is used
        } else {
            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", completed );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", completed );

            // If IE and not a frame
            // continually check to see if the document is ready
            var top = false;

            try {
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}

            if ( top && top.doScroll ) {
                (function doScrollCheck() {
                    if ( !jQuery.isReady ) {

                        try {
                            // Use the trick by Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }

                        // detach all dom ready events
                        detach();

                        // and execute any waiting functions
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
    // Add the callback
    jQuery.ready.promise().done( fn );

    return this;
};

また、両方のクイックリファレンスとして以下の画像を作成しました。

ここに画像の説明を入力してください

— アリレザ
ソース
1
美しい、ドキュメントを参照することはプラスポイントです.. thnx
— Irf
11

覚えておかなければならないことの1つ（またはリコールと言います）は、onloadのようにsをスタックできないことですready。言い換えると、jQueryマジックreadyでは同じページに複数のを許可していますが、ではそれを行うことはできませんonload。

最後のonloadは以前onloadのを無効にします。

これに対処する良い方法は、明らかに1つのSimon Willisonによって記述され、複数のJavaScriptオンロード関数の使用で説明されている関数を使用することです。

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* More code to run on page load */
});
— ドナルドA Nummer Jr
ソース
11

Document.ready（jQueryイベント）は、すべての要素が配置されたときに発生し、JavaScriptコードで参照できますが、コンテンツが必ずしも読み込まれるとは限りません。Document.readyHTMLドキュメントが読み込まれたときに実行されます。

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

window.loadしかし、完全にロードされるページを待ちます。これには、内部フレーム、画像などが含まれます。

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});
— マイク・クラーク
ソース
5

document.readyイベントは、HTMLドキュメントが読み込まれたときに発生し、window.onloadすべてのコンテンツ（画像など）が読み込まれたときに常に発生します。

document.ready画像が読み込まれるのを待たずに、レンダリングプロセスの「初期」に介入する場合は、イベントを使用できます。スクリプトが「何かを行う」前に画像（またはその他の「コンテンツ」）の準備が必要な場合は、window.onload。

たとえば、「スライドショー」パターンを実装していて、画像サイズに基づいて計算を実行する必要がある場合は、まで待つことをお勧めしますwindow.onload。そうしないと、イメージのロード速度に応じて、ランダムな問題が発生する可能性があります。スクリプトは、画像を読み込むスレッドと同時に実行されます。スクリプトが十分に長い場合、またはサーバーが十分に速い場合、画像がたまたま到着しても問題に気付かない場合があります。しかし、最も安全な方法は、画像をロードできるようにすることです。

document.ready ユーザーに「読み込み中...」のサインを表示するのに最適なイベントです。 window.onload、必要なリソースをロードしたスクリプトをすべて完了してから、最後に「Loading ...」のサインを削除できます。

例：-

// document ready events
$(document).ready(function(){
     alert("document is ready..");
})

// using JQuery
$(function(){
   alert("document is ready..");
})

// window on load event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;
— ニメシュ・カトリ
ソース
2

window.onloadJavaScript組み込み関数です。window.onloadHTMLページが読み込まれたときにトリガーされます。window.onload一度だけ書くことができます。

document.readyjQueryライブラリの関数です。document.readyHTMLファイルに含まれるHTMLおよびすべてのJavaScriptコード、CSS、および画像が完全に読み込まれたときにトリガーされます。 document.ready要件に応じて複数回書き込むことができます。

— アミット
ソース
「window.onloadは関数です」は、@Илья-Зеленькоが関数ではなくプロパティであることを示しているため、正しくありません。詳細：developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/….ready（）は関数であり、ハンドラーを想定しています。
— vik
1

と言うときは$(document).ready(f)、スクリプトエンジンに次のように指示します。

  1. オブジェクトドキュメントを取得してプッシュします。ローカルスコープにないため、ドキュメントがどこにあるかを見つけるためにハッシュテーブルルックアップを実行する必要があります。
  2. オブジェクトを見つける $を選択します。これはローカルスコープにないため、ハッシュテーブルの検索を実行する必要があります。
  3. 別のハッシュテーブルルックアップであるグローバルスコープでオブジェクトfを見つけるか、関数オブジェクトをプッシュして初期化します。
  4. ready選択されたオブジェクトの呼び出し。これには、選択されたオブジェクトへの別のハッシュテーブルルックアップが含まれ、メソッドを見つけてそれを呼び出します。
  5. 完了しました。

最良のケースでは、これは2つのハッシュテーブルルックアップですが、jQueryによる$すべての可能な入力のキッチンシンクであるjQueryによる重い作業を無視しているため、別のマップがクエリを正しいハンドラーにディスパッチする可能性があります。

または、次のようにすることもできます。

window.onload = function() {...}

どちらになります

  1. JavaScriptが最適化されている場合、グローバルスコープでオブジェクトウィンドウを検索します。ウィンドウは変更されていないため、ウィンドウは既に選択されているため、何もする必要はありません。
  2. 関数オブジェクトはオペランドスタックにプッシュされます。
  3. onloadハッシュテーブルルックアップを実行して、プロパティであるかどうかを確認します。プロパティなので、関数のように呼び出されます。

最良の場合、これは1回のハッシュテーブルルックアップにコストがかかりonloadます。これはフェッチする必要があるため必要です。

理想的には、jQueryはクエリをコンパイルして文字列に貼り付け、jQueryで実行したいことを実行するために貼り付けることができますが、jQueryのランタイムディスパッチは不要です。このように、あなたはどちらかのオプションを持っています

  1. 今日のようにjqueryの動的ディスパッチを実行します。
  2. jQueryにクエリをコンパイルして、evalに渡して目的の処理を実行できる純粋なJavaScript文字列を作成します。
  3. 2の結果をコードに直接コピーし、のコストをスキップしますeval。
— ドミトリー
ソース
0

window.onloadはDOM APIによって提供され、「指定されたリソースが読み込まれたときにloadイベントが発生します」と表示されます。

「ロードイベントは、ドキュメントのロードプロセスの最後に発生します。この時点で、ドキュメント内のすべてのオブジェクトはDOMにあり、すべての画像、スクリプト、リンク、およびサブフレームのロードが完了しています。」 DOM onload

ただし、jQueryでは、$（document）.ready（）は、ページのドキュメントオブジェクトモデル（DOM）がJavaScriptコードを実行する準備ができて初めて実行されます。これには、画像、スクリプト、iframeなどは含まれません。jqueryreadyイベント

したがって、jquery readyメソッドはdom onloadイベントよりも早く実行されます。

— andyCao
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.