4

これには決定的な答えが見つからないようです...

ページ上の画像への JavaScript 参照があり、loadイベント ハンドラーをその要素にバインドするとします。たとえば、次のようなものです。

HTML

<img id="myImage" src="http://example.com/image.jpg" />

JavaScript

var $myImage = $('#myImage');
$myImage.load(function() {
    alert('Image loaded!')
});

今、私がこれを行うと：

var imageElem = $myImage[0];
imageElem.src = imageElem.src; // Re-assign the image source path

...画像がサーバーから既に読み込まれている場合でもload、イベント ハンドラーは起動しますか? Firefoxでもできるようですが、この動作に頼っても安全ですか?

(私が尋ねる理由は、すべての画像がいつ読み込まれたかを確認するために jQuery プラグインでこれが使用されているのを見たからです。loadイベント ハンドラーがバインドされる前に画像が読み込まれた場合、次を使用して再トリガーされない限り、起動しません上記の方法です。）

4

3 に答える 3

4

img.src を設定するとロードが開始されますが、注意が必要です。.load イベントに関するjQuery 独自のドキュメントによると、

画像で使用する場合の load イベントの注意事項

開発者が .load() ショートカットを使用して解決しようとする一般的な課題は、画像 (または画像のコレクション) が完全に読み込まれたときに関数を実行することです。これには注意すべき既知の警告がいくつかあります。これらは：

  • クロスブラウザで一貫して確実に動作しない
  • 画像の src が以前と同じ src に設定されている場合、WebKit で正しく起動しません。
  • DOM ツリーを正しくバブルアップしない
  • ブラウザのキャッシュに既に存在する画像の起動を停止することができます
于 2012-12-13T16:54:51.523 に答える
2

Chromeインスペクターでこれを確認しました：

> img = document.createElement('img')
    <img>​
> img.addEventListener('load', function(e) {console.log('loaded');});
    undefined
> img.src = 'http://placekitten.com/200/300';
    "http://placekitten.com/200/300"
    loaded
> img.src = 'http://placekitten.com/200/300';
    "http://placekitten.com/200/300"
> img.src = 'http://placekitten.com/200/30';
    "http://placekitten.com/200/30"
    loaded 
> img.src = 'http://placekitten.com/200/300';
    "http://placekitten.com/200/300"
    loaded
> img.src = 'http://placekitten.com/200/300';
    "http://placekitten.com/200/300"

したがって、Chromeに関して答えるには、最初にsrcを別のものに設定しない限り、いいえ。

于 2012-12-13T16:58:22.393 に答える
0

私もこの問題を抱えていて、簡単な解決策を見つけました。

source 属性を置き換えることで、ロードされたイベントを複数回発生させることができます。値が既存のソースと等しい場合でも。サーバーによって無視される別のパラメーターを追加するだけです。

次の例を見てください。

var source = "http://example.com/image.jpg";
var imageElement = document.createElement('img');
imageElement.src = source + "?ignorethis=" + new Date().getTime(); // loaded
imageElement.src = source + "?ignorethis=" + new Date().getTime(); // loaded again

少し汚いですが、クロスブラウザで動作します。

于 2013-09-06T06:27:24.903 に答える