javascript - 複数 - window.onload=function()




window.onloadと$(document).ready() (10)

ちょっとしたヒント:

ウィンドウにイベントを追加するには、 常に 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が上書きされるオブジェクトのプロパティに過ぎないためです。

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


イベント

$(document).on('ready', handler)は、jQueryのreadyイベントにバインドします。 DOMがロードされるとハンドラが呼び出さます。 画像のような資産はまだ不足している可能性があります。 文書がバインディング時に準備されている場合は、決して呼び出されません。 jQueryはそれDOMContentLoaded -Eventを使用し、使用できない場合はそれをエミュレートします。

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

関数

$(document).ready(handler)実際にpromiseです。 呼び出し時にドキュメントが準備できたら、ハンドラは直ちに呼び出されます。 それ以外の場合は、 readyイベントにバインドされます。

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

参考文献


document.readyイベントは、HTMLドキュメントがロードされたときに発生し、 window.onloadイベントはすべてのコンテンツ(イメージなど)がロードされた後で常に発生します。

イメージが読み込まれるのを待つことなく、レンダリングプロセスで「早期」に介入する場合は、 document.readyイベントを使用できます。 あなたのスクリプトが何かをする前にイメージ(または他の "コンテンツ")が必要な場合は、 window.onloadまで待つ必要があります。

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

document.readyは、ユーザーにいくつかの "読み込み中..."というサインを表示し、 window.onload 、読み込まれたリソースを必要とするスクリプトを完了して、最後に "読み込み中..."符号。

例: -

// 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;

$(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を実行するために使用されます。 ここにイベントハンドラーを置く。
  • 複数回使用できます。
  • "$が定義されていません"と表示されたら、 $jQueryに置き換えます。
  • イメージを操作する場合は使用されません。 代わりに$(window).load()使用してください。

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


$(document).ready(f)と言うと、スクリプトエンジンに次のことを指示します:

  1. オブジェクトドキュメントを取得してプッシュします。ローカルスコープではないため、ドキュメントがどこにあるかを見つけるためにハッシュテーブルルックアップを実行する必要があります。幸運なことに、ドキュメントはグローバルにバインドされているため、単一ルックアップです。
  2. オブジェクト$を見つけてそれを選択します。ローカルスコープではないので、ハッシュテーブルルックアップを実行する必要があります。ハッシュテーブルルックアップは、衝突があってもなくてもかまいません。
  3. グローバルスコープ内のオブジェクトfを探します。これは別のハッシュテーブル参照、または関数オブジェクトをプッシュして初期化します。
  4. 選択されたオブジェクトの別のハッシュテーブルルックアップを含み、選択されたオブジェクトを参照してメソッドを見つけ出し、呼び出す。
  5. 完了しました。

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

あるいは、これを行うことができます:

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

これは

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

最良の場合、これは、 onloadがフェッチされる必要があるため、必要な単一のハッシュテーブルルックアップを必要とします。

理想的には、jQueryは、jQueryの実行時ディスパッチを行わずにjQueryで実行したいことを行うためにペーストできる文字列にクエリをコンパイルします。 この方法では、

  1. 今日のようにjqueryの動的ディスパッチを行う。
  2. jQueryに、あなたが望むことを行うためにevalに渡すことができる純粋なJavaScript文字列にクエリをコンパイルさせます。
  3. 2の結果をコードに直接コピーし、 evalのコストをスキップします。

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");
});

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

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


window.onloadはビルトインのJavaScriptイベントですが、その実装にはブラウザ(Firefox、Internet Explorer 6、Internet Explorer 8、 Opera )間の微妙な違いがあるため、jQueryはdocument.ready提供し、それらを抽象化してすぐに起動しますページのDOMが準備されているので(画像などを待つことはありません)

$(document).ready (未定義のdocument.readyではないことに注意して$(document).ready )はjQuery関数で、次のイベントにラップして一貫性を提供します:

  • document.ondomcontentready / document.ondomcontentloaded - ドキュメントのDOMがロードされたときに起動するnewishイベントです(画像などがロードされるまでに時間がかかることがあります)。 再び、Internet Explorerやその他の世界では若干異なります
  • (古いブラウザでも実装されている) window.onloadは、ページ全体が読み込まれたときに起動します(イメージ、スタイルなど)

window.onload: 通常のJavaScriptイベントです。

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


覚えておくべきこと(または私がリコールと言うべきである)は、 readyができているようにonload積み重ねることができないということです。 言い換えれば、jQueryの魔法は同じページで複数のreadyができていますが、あなたはそれをonload行うことはできません。

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

これを処理するうまい方法は、Simon Willisonによって書かれた関数で、 複数のJavaScript Onload関数の使用で説明されている関数を使うことです。

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 */
});




unobtrusive-javascript