如何在背景圖像完全加載時啓動一個函數？

Question

霍洛兄弟！

我想在圖像加載完成時運行一個函數。我的代碼： -

HTML： -

<div id="s_pc" style="background-image:url(http://www.surfixe.com/img/surfixe_pc.png)"></div> 
<button id="btn" style="display:none">This button should only show when image loading completes!</button> 

的jQuery： -

$('#s_pc').attr('style', 'background-image:url(www.surfixe.com/img/surfixe_pc.png)').load(function() { 
    alert('Image Loaded'); 
    $('#btn').show(); 
}); 

My current fiddle

好像有在我的編碼錯誤。有任何想法嗎？

Answer 1

這裏有人（我不知道名字）回答了我的問題，但刪除了它。所以，我想我應該將它張貼： -

$('<img/>').attr('src', 'http://www.surfixe.com/img/surfixe_pc.png').load(function() { 
    alert('Image Loaded'); 
    $('#btn').show(); 
}); 

編輯：jsfiddle

Answer 2

嘗試。 使用Javascript加載圖像，然後將該圖像設置爲背景。

var bgImg = new Image(); 
bgImg.onload = function(){ 
    $('#s_pc').css('background-image', 'url(www.surfixe.com/img/surfixe_pc.png)'); 
    alert('Image Loaded'); 
    $('#btn').show(); 
}; 
bgImg.src = 'www.surfixe.com/img/surfixe_pc.png'；