Как запустить функцию, когда фоновое изображение полностью загружается?

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, а затем установите это изображение как backgroud.

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'；