画像を読み込んだ後に警告を出す方法は？

Question

私はこのコードを持っていて、backgroundImageがロードされた後にアラートがポップアップしたいと思っています。

$('#element').click(function(){ 
    $('#element').css({ 
     backgroundImage: "url('http://www.button.jpg')", 
     backgroundRepeat: 'no-repeat', 
     backgroundPosition: '7px 5px'});; 

alert ("button is loaded"); 

button.jpgは3KBです。
ボタンの要素をクリックすると、最初にALERTポップアップが表示され、画像が完成すると2秒後に表示されます。

私はタイムアウト

についても遅延（）
についても、コールバック
読んしかし、私は、コードに新しいです、と私はここで何をどのように行う必要があります理解していませんでした。

Answer 1

最初に画像にloadイベントを設定します。

var imgSrc = 'http://www.button.jpg'; 

$('#element').click(function() { 

    var img = new Image, 
     element = $(this); 

    img.onload = function() { 

     element.css({ 
      backgroundImage: "url('" + imgSrc + "')", 
      backgroundRepeat: 'no-repeat', 
      backgroundPosition: '7px 5px' 
     }); 

     alert("button is loaded"); 

    } 

    img.src = imgSrc; 

}); 

jsFiddle。

イメージがロードされると、ロードコールバックが呼び出され、バックグラウンドが更新されます。

IE6をサポートする必要があり、画像を再度ダウンロードして協力しないと分かっている場合は、workaroundを調べる必要があります。