14

Is there a way, using jQuery, to trigger an event on load of a CSS background image?

Squirkle
  • 933
  • 1
  • 7
  • 22
  • 1
    Possible duplicate of [How can I check if a background image is loaded?](http://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded) – azerafati Oct 02 '16 at 12:39

4 Answers4

22

you could do it like this,

demo

$('<img>').load(function(){
    // make sure to bind the load event BEFORE setting the "src"
    alert('image loaded');
}).attr('src',function(){
    var imgUrl = $('body').css('background-image');
    imgUrl = imgUrl .substring(4, imgUrl .length-1);
    return imgUrl;
}).each(function() {
    // fail-safe for cached images which sometimes don't trigger "load" events
    if(this.complete) $(this).load();
});
Community
  • 1
  • 1
Reigel Gallarde
  • 64,198
  • 21
  • 121
  • 139
  • Would this wait until the image is loaded or until there is a return on the value of the 'background-image' property? – Squirkle Jul 19 '10 at 14:04
  • 1
    actually what happened there is it will wait for the image to load... in this case the background image of the body tag... – Reigel Gallarde Jul 19 '10 at 14:37
  • That's a pretty neat trick. How does it work? I can't figure out what $('') is targeting... – Squirkle Jul 19 '10 at 15:21
  • 1
    @sequoia mcdowell - you got the wrong link. It's a [load event](http://api.jquery.com/load-event) – Reigel Gallarde Jan 27 '11 at 01:05
  • 2
    The demo is broken based on Fresheyeball's notes I've fixed it: http://jsfiddle.net/7bmhf/ – Luke Stanley Mar 09 '12 at 19:30
  • @Squirkle $("") is not targeting, it's creating. $() is overloaded, if you pass it an HTML string instead of a CSS-selector, jQuery will create that bit of HTML for you. – Mansiemans May 23 '12 at 13:17
  • I dont get the image loaded alert in the demo. No JS errors. The image is visible so no sure why the callback isn't firing? – iltdev Sep 27 '12 at 15:05
  • 1
    @iltdev - the original code was not in the right order and omitted some some fail-safe checking for cached images. See updated answer. – Ryan Wheale Jan 28 '14 at 09:20
  • Maybe it makes sense to use `.one('load', ...)` to avoid double processing? – raacer Dec 12 '14 at 16:29
  • There seems to be an issue here, we should change the code to : `imgUrl = imgUrl .substring(5, imgUrl .length-2); ` – Tarun Gupta Sep 20 '16 at 14:37
  • hmm, so it creates a second, off-document copy of the background image, and waits for that to load, and basically presumes that when that one is loaded, the background image will also be loaded.. – Shavais May 24 '17 at 23:49
2
$('<img>').attr('src',function(){
    var imgUrl = $('#body').css('background-image');
    imgUrl = imgUrl .substring(5, imgUrl .length-2);
    return imgUrl;
}).load(function(){
    //Do Something
});

Could not help but notice that the above code does not work in fiddle. Looks like its because it returns "url('/img-path.jpg')" instead of just "/img-path.jpg".

However this method still fails in IE. Anyone have an ie fix?

Fresheyeball
  • 29,567
  • 20
  • 102
  • 164
2

I found that the problem with IE is cache: http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/

so you could try this:

$(”).attr({src: src + ‘?random=’ + (new Date()).getTime()}).load(function (){
  //custom code here....
});
Carlos Rocha
  • 21
  • 3
0
$(document).ready(function(){
$('img, .hasBGI').css('opacity',0)

$('.hasBGI').each(function(){
    var $this = $(this)
        $bgi = $('<img src="'+/*folderFix*/$this.css('backgroundImage')+'">')
        // $bgi.css(/*hiddingStyle*/)
        $('body').append($bgi)
        $bgi.load(function(){
            $(this).remove()
            $this.animate({opacity:1})
        })
})
$('img').load(function(){
    $(this).animate({opacity:1})
})

})

mishik
  • 9,973
  • 9
  • 45
  • 67
domSurgeon
  • 91
  • 1
  • 3