web-dev-qa-db-ja.com

window.onload対document.ready jQuery

2つの列があるサイトがあります。 jQueryを使用して両方の高さを等しくしたいのですが。

ロゴの列の高さを取得しようとしています。私が持っていた:

$(document).ready(function() {
    alert($('#logo').height());
});​

そしてそれはうまくいきませんでした。だから私はそれを次のように変更しました:

window.onload = function(){
    alert($('#logo').height());
}

そしてそれは働いています。ここで何が起こっているのですか?

25
KryQ

$(document)ready内の画像の高さと幅を処理するときに同じ問題があり、それを解決するためのより良いリファレンスがいくつか見つかりました...これが誰かに役立つことを願っています

$(document).ready()

すべてのグラフィックがまだ読み込まれていない場合でも、HTMLドキュメントが読み込まれ、DOMの準備ができると、ドキュメント準備イベントが発生します。ウィンドウがロードされる前に特定の要素のイベントをフックしたい場合は、$(document).readyが適切です。

コード:

$(document).ready(function() {
    // document is loaded and DOM is ready
    alert("document is ready");
});

$(window).load()

ウィンドウの読み込みイベントは、少し後に、すべてのフレーム、オブジェクト、画像を含むページ全体が完全に読み込まれたときに発生しました。したがって、画像やその他のページコンテンツに関連する関数は、ウィンドウまたはコンテンツタグ自体のロードイベントに配置する必要があります。

コード:

$(window).load(function() {
    // page is fully loaded, including all frames, objects and images
    alert("window is loaded");
});
3
kamesh

document readyはDOMが読み込まれたときに発生するため、明示的に宣言されていない限り、高さなどの情報は利用できません。

window onloadは、ページ内のアセットが完全に読み込まれるのを待ちます-そのため、高さなどの情報が利用可能になりました。

34
ahren