jQuery:ドキュメント準備完了の起動が要件に対して早すぎます

StackOverflow https://stackoverflow.com/questions/2034810

  •  19-09-2019
  •  | 
  •  

質問

私は写真を中心としたサイトを開発しています。このサイトの一部の領域では、正しく動作するために画像の寸法に基づいて計算する必要があります。私が発見したのは、Document Ready が起動するのが早すぎて、その結果として GUI が不安定に動作しているということです。

私は document Ready 関数を削除し、古き良き window.onload 関数に置き換えました。正しく読めば、この関数は画像が完全に読み込まれるまで起動しないからです。

私の質問は、これによって何か問題が生じるでしょうか?そして、おそらく私が見逃している他の解決策はありますか？

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

役に立ちましたか？

解決

使えない理由はない $(window).load() とは対照的に $(document.ready(). 。画像が完全にロードされる（またはロードに失敗する）まで関数は起動しないという点は正しいです。

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

の ハッピーミディアム するだろう 使用 $(window).ready() ほとんどの状況で そして 中にイベントだけを入れる $(window).load() それらを絶対に必要とするもの.

他のヒント

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

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

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

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

window.onloadがニーズに合うかAltough、私は少し物事をスピードアップするお勧めします：

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

これは、要素のセット全体を待って個別に早くそれがロードされるとしていない画像を処理することができます。

ここでは非常にシンプルなソリューションです。

width=""とheight=""は、すべての画像の属性を含めます。これは正しくとイメージがロードされる前であっても所定の位置にすべてをレンダリングするためにブラウザを強制します。画像の読み込みながら、ページの不動産に各画像のために必要なスペースが適切に確保されます。

それはそれだ！

あなたがそれを行う場合は、

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

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

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

あなたは多分あなたは「のsetTimeout」を使用することができます与えられた時間の量と、それを遅らせたい場合は：）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top