25

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

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

私の質問は、これにより問題が発生しますか? おそらく見逃した他の解決策はありますか？

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

4

6 に答える 6

51

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

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

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

于 2010-01-09T20:29:02.950 に答える
14

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

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

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

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

于 2010-01-09T20:27:05.403 に答える
8

window.onloadあなたのニーズには合っていますが、少しスピードアップすることをお勧めします：

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

これで、要素のセット全体を待たずに、画像がロードされるのと同じくらい迅速に画像を個別に処理できるようになりました。

于 2010-01-09T21:03:40.807 に答える
7

これは非常に簡単な解決策です：

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

それでおしまい！

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

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

とにかく、何か新しいことを学んだことを願っています。;)

于 2011-09-27T00:07:27.463 に答える
2

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

于 2010-01-09T21:26:29.533 に答える
2

load()jquery でイベントを使用できますが、ドキュメントでは、要素が既に読み込まれている場合、期待どおりに機能しない可能性があると記載されています。

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

于 2010-01-09T20:32:02.583 に答える