静止画像の画像オンロード

Question

画像オンロードが機能するためには、オンロードハンドラがアタッチされた後にsrcを設定する必要があることは知っています。しかし、私はHTMLに静的な画像にonloadハンドラをつけたいと思っています。

<img id='img1' src='picture.jpg'> 

$('#img1').load(function() { 
alert('foo'); 
}) 
.attr('src', $('img1').attr('src')); 

しかし、これはかなり醜いであり、それは1つのみに一致するセレクタに対して行うことができることは明らか流れがあります。今、私は（jQqueryを使用して）次のようにそれを行います画像。これを行うための他の、より良い方法はありますか？私はそれだけで一つだけの画像に一致するセレクタのために行うことができることによって、何を意味するのか

編集
はこれをやったときにということである。

<img class='img1' src='picture.jpg'> 
<img class='img1' src='picture2.jpg'> 

$('.img1').load(function() { 
alert('foo'); 
}) 
.attr('src', $('.img1').attr('src')); 

両方のイメージをすることhave src = 'picture.jpg'

Answer 1

あなたは.trigger()または​​を呼び出して直接イベント（またはそれのハンドラ）をトリガすることができます。ドキュメント準備またはいくつかの瞬間にあなたのスクリプトを実行している場合

$('#img1').load(function() { 
    alert('foo'); 
    }) 
    .trigger('load'); // fires the load event on the image 

：あなたがイメージがすでにロードされていることを知っているので、あなたはこのようにそれを行うことができます

あなたがイベントをしたいことがわかっている場合は、画像があるかそうでないならば、それはまだ明らかでない場合、その後、私はこのようなものを使用します。

$('img.static') 
    .load(function(){ 
    alert('foo'); 
    return false; // cancel event bubble 
    }) 
    .each(function(){ 
    // trigger events for images that have loaded, 
    // other images will trigger the event once they load 
    if (this.complete && this.naturalWidth !== 0) { 
     $(this).trigger('load'); 
    } 
    }); 

はロードイベントの泡（jQueryの1.3）とは、あなたがおそらく負荷ハンドラをトリガする可能性があることに注意して文書内のバブルをキャンセルしないと、早急に文書にimgハンドラ。

記録のため：img.src=img.srcトリガーソリューションは残念ながらSafariで正しく動作しません。 srcを別のもの（＃またはabout：空白のようなもの）に設定してから、リロードが起こるように戻す必要があります。

Answer 2

これは本当にjQueryセレクタに関する質問だと思いますs。すべての画像要素を一致させる場合は、#img1の代わりにimgをセレクタとして使用できます。

Answer 3

この機能を使用するクラスを画像に追加し、そのクラスをjQueryセレクタで使用します。

$('.static-image').load(function(){ ... }); 

Answer 4

さて、私はBorgarsは、プラグインに答えるなって、ここにある：

$.fn.imageLoad = function(fn){ 
    this.load(fn); 
    this.each(function() { 
     if (this.complete && this.naturalWidth !== 0) { 
      $(this).trigger('load'); 
     } 
    }); 
}