jquery - 背景图像完全加载时如何启动功能？

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();
});

我现在的小提琴

好像我的编码有错误。有任何想法吗？

Answer 1

尝试这个。使用 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'；

Answer 2

这里有人（我不知道名字）回答了我的问题，但删除了它。所以，我想我应该发布它：-

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

编辑：jsfiddle