Question

Hullo兄弟！

我想在图像加载完成时运行一个函数。我的代码： -

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

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

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

2 个答案: