如何使警報在圖像加載後運行？

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是一個小尺寸：3 KB。
但是當我點擊按鈕元素時，首先會彈出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。