How to start a function when background image loads completely?

Question

Hullo brothers!

I wanted to run a function when image loading completes. My code:-

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

Seems like there is an error in my coding. Any ideas?

Some searching: http://stackoverflow.com/questions/2392410/jquery-loading-images-with-complete-callback — Daniel, Apr 27 '13 at 03:08

score 0 · Answer 1 · answered Apr 27 '13 at 03:15

0

try this. to load the image using Javascript, and then set that image as the 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'；

answered Apr 27 '13 at 03:15

SivaGao

1
1
1

sorry, but this code does not work – Surfine Apr 27 '13 at 03:16
you need some cleanup.. such as the current src.. – SivaGao Apr 27 '13 at 08:52

Surfine · Answer 2 · 2013-04-27T03:27:04.063

-1

Some one here (I don't know the name) has answered my question but deleted it. So, I thought I should post it:-

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

edit: jsfiddle

edited Apr 27 '13 at 03:27

answered Apr 27 '13 at 03:10

Surfine

392
2
5
15

2

This is not the answer to what you originally asked. – Apr 27 '13 at 03:12
What do u mean? This code worked perfectly – Surfine Apr 27 '13 at 03:17

How to start a function when background image loads completely?

2 Answers2