4

ページ上のすべての画像が読み込まれると、コールバックを呼び出すjQuery プラグインを使用しています。プロパティをチェックしimageObject.complete、ハンドラーをloadおよびerrorイベントにバインドして、画像の読み込みがいつ完了するかを判断します。

これはうまく機能しますが、私が直面している問題は、画像が読み込まれていると見なされていても、画像またはそれを含む要素のプロパティheightとプロパティを調べたときに、寸法がまだ更新されていないことです。widthdiv

次に例を示します。

http://jsfiddle.net/RtnVx/12/

含まれている要素が画像にheight合わせてサイズ変更されていることを確認してから、その要素とwidth寸法にアクセスすることを試みるにはどうすればよいですか?

編集 1:例を理解しやすくするために、jsfiddle のコードをクリーンアップしてコメントしました。

編集 2:別のマシンからコードを実行すると、適切に動作する (つまり、トップ マージンが適切に計算される) ため、キャッシュに基づく競合状態またはバリエーションが存在する必要があります。これは、一貫性がないため実際には良くありません。矛盾は、Chrome、FWIW でより顕著です。

また、明確にするために、目標はinit画像が読み込まれるたびに呼び出すことではありません。むしろ、 AJAX呼び出しを介してすべての画像が読み込まれた後に一度init呼び出す必要があります。load

4

1 に答える 1

3

回答: http://jsfiddle.net/morrison/RtnVx/30/

batchImageLoad画像の読み込みが完了するまで呼び出す必要はありませんでした。読み込んだ画像にイベントを作成しました。

更新されたメモ:

  • jQuery プラグインを切り出しました。難しすぎて、よくわかりませんでした。
  • 私の現在のソリューションは、プラグインと同様に、イベントを使用してエラー処理を提供します。error
  • 解決プロセス:
    • すべてimgの の降順を検索し、#slidesその長さを属性に格納し.data()ます。また、ロードされた数を保持する変数も格納します。
    • 読み込まれた画像の数を更新するイベントをそれぞれにバインドしloadます。errorimg
    • 読み込まれた/エラーになった画像の数が画像の総数に達した場合は、setTimeout()すべての画像の幅が 0 より大きくなるまでを呼び出してから、 を呼び出しますinit()。
于 2011-05-23T22:11:38.313 に答える