web-dev-qa-db-ja.com

window.onload vs $（ドキュメント）.ready（）

JavaScriptの window.onload メソッドとjQueryの $(document).ready() メソッドの違いは何ですか？

javascriptjqueryjavascript-eventsunobtrusive-javascript
1170
Vaibhav Jain

readyイベントはHTML文書がロードされた後に発生しますが、onloadイベントは後ですべてのコンテンツ（画像など）もロードされたときに発生します。

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

1175
Guffa

window.onloadは組み込みのJavaScriptイベントですが、その実装には 微妙な がブラウザ（Firefox、Internet Explorer 6、Internet Explorer 8、および Opera ）を超えて癖があります。 document.readyはそれらを抽象化し、ページのDOMの準備が整うとすぐに起動します（画像などを待つことはありません）。

$(document).ready（これは未定義の not document.readyであることに注意してください）は、jQuery関数で、次のイベントをラップして consistency を提供します。

  • document.ondomcontentready/document.ondomcontentloaded - ドキュメントのDOMがロードされたときに発生する新しいイベントです（時間がかかる場合がありますイメージなどがロードされるなど）。繰り返しますが、Internet Explorerと他の国々では多少異なります
  • window.onload（これは古いブラウザでも実装されています）は、ページ全体が読み込まれたときに起動します（画像、スタイルなど）。
130
Piskvor

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

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

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

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

または簡略版：

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

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

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

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

85
James Drinkard

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

jQuery $document.ready functionイベントはwindow.onloadより少し前に実行され、DOM（Document object model）がページに読み込まれると呼び出されます。 画像、フレームが完全にロードされるのを待つことはありません。

次の記事を参考にしてください。 $document.ready()とwindow.onload()の違い

41
Vivek

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

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

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

22
deck
$(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>
20
dev4092

イベント

$(document).on('ready', handler)はjQueryのreadyイベントにバインドします。 DOMがロードされると、ハンドラはと呼ばれます。 画像のようなアセットにまだがない可能性があります。文書が製本時に用意されている場合は呼び出されません。 jQueryは DOMContentLoaded - イベントを使います。利用できない場合はそれをエミュレートします。

$(document).on('load', handler)は、すべてのリソースがサーバーからにロードされると発生するイベントです。画像がロードされました。 onload は生のHTMLイベントですが、 ready はjQueryによって構築されます。

関数

$(document).ready(handler)は実際には の約束です 。 呼び出し時にdocumentの準備ができていれば、すぐにハンドラが呼び出されます。そうでなければ、ready-イベントにバインドします。

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

参考文献

16
abstraktor

ちょっとしたコツ：

ウィンドウにイベントを追加するには常に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と同じように、onloadよりも$(document).ready()を使うほうが良いです。

13
Илья Зеленько

window.onload：通常のJavaScriptイベント。

document.ready：HTML全体がロードされたときの特定のjQueryイベント。

12
Amir Mehdi Delta

$(document).ready()はjQueryイベントで、HTMLドキュメントが完全に読み込まれたときに発生し、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;
};

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

enter image description here

12
Alireza

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

$(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");
});
11
Mike Clark

覚えておくべき1つのこと（または思い出してください）は、onloadを使用する場合のようにreadyをスタックすることはできないということです。言い換えれば、jQuery magicでは同じページに複数のreadyを使用できますが、onloadを使用してそれを行うことはできません。

最後のonloadは、以前のonloadを上書きします。

これに対処するための良い方法は、明らかにSimon Willisonによって書かれ、で説明されている関数を使うことです。.

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 */
});
10
Donald A Nummer Jr

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

画像が読み込まれるのを待たずに、レンダリングプロセスの「早い段階」で介入したい場合は、document.readyイベントを使用できます。あなたのスクリプトが「何かをする」前に画像（あるいは他の「コンテンツ」）を準備しておく必要があるなら、window.onloadまで待つ必要があります。

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

document.readyは、ユーザーに何らかの "loading ..."のサインを見せるためのいいイベントであり、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;
5
Nimesh khatri

window.onloadはJavaScriptの組み込み関数です。 HTMLページがロードされたときにwindow.onloadトリガします。 window.onloadは一度だけ書くことができます。

document.readyはjQueryライブラリの機能です。 document.readyは、HTMLと、そのHTMLファイルに含まれているすべてのJavaScriptコード、CSS、およびイメージが完全に読み込まれたときにトリガーされます。 document.readyは要件に応じて複数回書くことができます。

2
Amit

$(document).ready(f)と言うと、スクリプトエンジンに次のことをするように伝えます。

  1. オブジェクトdocumentを取得し、それをプッシュします。これはローカルスコープではないので、documentがどこにあるかを探すためにハッシュテーブルルックアップを行わなければなりません。
  2. オブジェクト$を見つけて選択します。これはローカルスコープにはないため、ハッシュテーブルルックアップを実行する必要があります。これは衝突の可能性があります。
  3. 別のハッシュテーブル検索であるグローバルスコープ内のオブジェクトfを探すか、またはPush関数オブジェクトを使って初期化します。
  4. 選択されたオブジェクトのreadyを呼び出します。これは、選択されたオブジェクトへの別のハッシュテーブルルックアップを含み、メソッドを見つけてそれを呼び出すためのものです。
  5. 行った。

最良の場合、これは2つのハッシュテーブルルックアップですが、jQueryが行う可能性のあるすべての入力のキッチンシンクが$であるため、jQueryによる大きな作業は無視されます。

あるいは、これを行うこともできます。

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

どちらでしょう

  1. javaScriptが最適化されていれば、グローバルスコープでオブジェクトウィンドウを見つけます。ウィンドウは変更されていないので、既に選択されているオブジェクトがあるので、何もする必要はありません。
  2. 関数オブジェクトはオペランドスタックにプッシュされます。
  3. onloadがプロパティであるかどうかを調べるために、ハッシュテーブルルックアップを行います。それは関数のように呼ばれるからです。

最良の場合、これには単一のハッシュテーブル検索が必要です。これはonloadをフェッチする必要があるため必要です。

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

  1. 今日のようにjqueryの動的なディスパッチをします。
  2. jQueryにクエリを純粋なJavaScript文字列にコンパイルしてもらい、それをevalに渡して必要なことをさせることができます。
  3. 2の結果をコードに直接コピーし、evalのコストをスキップしてください。
1
Dmitry

インデックスページ内に2つの部分ビューがあるシナリオを考えます

例

    <div id="ReportHere" class="container-fluid">
        @Html.Action("ProjectAbc", "ProjectSalesVolume", new { reportType = "Projected Sales Volume", region = "Karachi", sector = "All" })
    </div>


@Html.Action("AbcFilters", "ProjectSalesVolume")

現在、アクションProjectAbcページには、window.onload関数内にスクリプトがあります

例 グラフ

window.onload = function () {

debugger;
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title: {
    text: '@(Model.topTitleChart)'
},
axisY: {
    title:  '@(Model.leftTitleChart)'
},
data: [{
    type: "column",
    indexLabel: "{y}",
    indexLabelPlacement:"inside",
    dataPoints: @Html.Raw(Model.dataPoints)
    }]
 });
 chart.render();

 }

また、アクションには戻り型の部分ビューがあります。

  return PartialView("ProjectAbc", model);

また、フィルターページには、ProjectAbcへのポストバック呼び出しがあります

例

@using (Ajax.BeginForm("ProjectAbc", new AjaxOptions { HttpMethod = "Post" }))
 {
      //property binding here
     <input type="submit" value="filter"/>

 }

インデックスページ内でProjectAbcを使用してレンダリングされるフィルタービューからフィルターをヒットすると、初めてのアフターページロードが行われますが、window.onload内のメソッドは呼び出されません。したがって、このシナリオではwindow.onloadは、ページの更新時に1回だけ呼び出されます

0
TAHA SULTAN TEMURI