1

img要素があり、そのsrcを動的に変更するたびに、新しい画像の幅を取得したい（完全に読み込まれた後）

.load（）は、画像がすでにキャッシュにある場合はトリガーされないようです（？）が、この場合、次のように再度ロードしたくありません。

   'image.jpg?' + new Date().getTime();

だろう（？）

それを行うための最良の方法は何ですか？

編集：

$('#test img:first').load(function() {
    console.log($(this).width());
});

キャッシュ内の画像がすでにキャッシュされている場合はトリガーされないようです

4

2 に答える 2

3

.load()一部のブラウザー (IE) では、画像がキャッシュにありonload、プロパティが画像に設定される前にハンドラーがインストールされていない場合はトリガーされません。.src

画像が JavaScript で動的に作成されている場合は、プロパティが設定されるonload前にハンドラーが割り当てられていることを確認してください。.src

画像がページ HTML にある場合、その特定の画像の onload イベントを確実に取得する唯一の方法は、HTML 自体に onload ハンドラーを指定することです。HTML 内の画像に対して JavaScript を使用して onload ハンドラをインストールし、それが呼び出されることを確認する方法はありません。これは、JavaScript が実行される前に画像がすでにロードされている可能性があるためです。

画像がプロパティで既に読み込まれているかどうかを確認でき.completeます。

したがって、HTML 内の画像の回避策は次のようになります。

var img = $('#test img:first');
if (!img[0].complete) {
    img.load(function() {
        // onload code here
    });
} else {
   // image already loaded
}
于 2013-02-25T18:30:54.347 に答える
1

最近のブラウザでは、completeプロパティを使用して、画像がキャッシュされている場合でも、画像の読み込みが完了したことを確認できます。何かのようなもの：

$("#myimg").on('load', function () { /* get new width */ });

if ($("#myimg").attr('src', 'image.jpg').prop('complete')) {
    /* get new width */
}

（.prop動作しない場合に備えて、を使用できます.get(0).complete）。

于 2013-02-25T18:24:54.727 に答える