web-dev-qa-db-ja.com

jQuery：ドキュメントの準備ができて私の要件に対して早すぎます

写真を中心としたサイトを開発しています。このサイトの一部の領域では、正しく機能するために画像のサイズに基づいて計算する必要があります。私が見つけたのは、ドキュメントの準備が早すぎて、結果として私のGUIが不規則に動作しているということです。

ドキュメントの準備ができた関数を削除し、適切な 'ol window.onload関数に置き換えました。正しく読み取った場合、この関数は画像が完全に読み込まれるまで起動しないためです。

私の質問は、これは何か問題を引き起こすでしょうか？そして、私がおそらく見逃した他の解決策はありますか？

助けてくれてありがとう！

jquerydocument-ready
24
user239237

$(window).load()とは対照的に$(document.ready()を使用できない理由はありません。画像が完全にロードされる（またはロードに失敗する）まで関数が起動しないことについては正しいです。

$(window).load()に完全に依存することの欠点は、場合によっては、JavaScriptが機能していないことがすぐにわかることです（つまり、navigationまたはページ上のすべてのアイテムが読み込まれるまでイベント）をクリックします。一部のユーザー（通常はWebサイトのパワーユーザー）は、ページをクリックするのが非常に速く、これにより全体的なユーザーエクスペリエンスが損なわれます。

幸せな媒体はほとんどの状況で$(window).ready()を使用および絶対に必要なイベントのみを$(window).load()内に配置します。

50
Corey Ballou

代わりにこれを試してください：

_$(window).load(function() {
 alert("images are loaded!");
});
_

$(document).ready()と$(window).load()の比較については、このリンクを参照してください

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

14
JCasso

全体的にwindow.onloadあなたのニーズに合うでしょう、私は物事を少しスピードアップすることをお勧めします：

$("img.load").load(function(){
    alert($(this).width());
});

これで、要素のセット全体を待たずに、ロードされるのと同じ速さで画像を個別に処理できます。

8
metrobalderas

非常に簡単な解決策は次のとおりです。

すべての画像にwidth=""属性とheight=""属性を含めます。これにより、画像が読み込まれる前であっても、ブラウザはすべてを正しく適切にレンダリングします。ページの領域内の各画像に必要なスペースは、画像の読み込み中に適切に確保されます。

それでおしまい！

そうすれば、document.readyはシナリオで問題なく機能します。何が起こっているのかというと、ブラウザは画像を取得/ロードする前に画像のサイズを知らないため、ブラウザは推測する必要があります。それはおかしな振る舞いを引き起こす可能性があります。画像の幅と高さを指定すると、この問題が解決します。

誰もそれについて言及していないことに驚いています。 cballouの答え は間違いなく良いアドバイスですが、それは必ずしもjavascriptの問題ではありません。

とにかく、あなたが何か新しいことを学んだことを願っています。 ;）

7
trusktr

与えられた時間だけ遅らせたい場合は、「setTimeout」を使用できます:)

2
fmsf

load() event in jquery を使用することもできますが、ドキュメントには、要素がすでにロードされている場合は期待どおりに機能しない可能性があると記載されています。

注：ロードは、要素が完全にロードされる前に設定した場合にのみ機能し、その後に設定した場合は何も起こりません。これは、jQueryが期待どおりに機能するように処理する$（document）.ready（）では発生しません。また、DOMのロード後に設定する場合も同様です。 - http://docs.jquery.com/Events/load

2
adamse