JS wait for CSS background image to load

Question

It's easy to keep javascript waiting for some images to load if those are classic HTML images.

But I can't figure how to do the same if the image is loaded as a CSS backuground-image!

Is it possible?

The jQuery .load() method doesn't seem to apply.. and I'm short of ideas

The first thing that comes to mind is to precache the image in an actual img element which you can hide. Something like: http://technosophos.com/content/precaching-images-jquery-slightly-better-way. There are probably better solutions though. — mowwwalker, Jan 28 '12 at 03:47
You may want to check out this answer: http://stackoverflow.com/questions/3489270/wait-until-images-in-background-css-are-loaded — Jason Gennaro, Jan 28 '12 at 03:48
I haven't tried this, but perhaps you could do an image pre-load from JS/jQuery (like for old-school image rollovers), check the loaded status of the image, and then after it has loaded assign the CSS background property to the same image before going on with whatever other JS you want to do when the image is ready? — nnnnnn, Jan 28 '12 at 03:48
so the background loading doesn't trigger any event.. too bad. Then I guess I'll manage to get it working with a preloader. thanks for the hint guys — Valentino, Jan 28 '12 at 03:55
you can use AJAX to do this, after success your request finish your waiting. — Ali U, Jan 28 '12 at 06:28
I thought about it, but once I got my image inside a js object, how can I use it as a css background? — Valentino, Jan 28 '12 at 17:52
possible duplicate of [Official way to ask jQuery wait for all images to load before executing something](http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin) — Lix, May 29 '12 at 12:19

Arkadiusz Cieśliński · Answer 1 · 2012-12-21T11:45:29.507

It looks for elements with src attribute or backgroundImage css property and calls an action function when theirs images loaded.

/**
 * Load and wait for loading images.
 */
function loadImages(images, action){
    var loaded_images = 0;
    var bad_tags = 0;        

    $(images).each(function() {
    //alert($(this).get(0).tagName+" "+$(this).attr("id")+" "+$(this).css("display"));
        var image = new Image();
        var src = $(this).attr("src");
        var backgroundImage = $(this).css("backgroundImage");            
        // Search for css background style
        if(src == undefined && backgroundImage != "none"){
            var pattern = /url\("{0,1}([^"]*)"{0,1}\)/;                
            src = pattern.exec(backgroundImage)[1];                
        }else{
            bad_tags++;
        }
        // Load images
        $(image).load(function() {
            loaded_images++;                
            if(loaded_images == ($(images).length - bad_tags))
                action();
        })
        .attr("src", src);
    });
}

score 1 · Answer 2 · answered Dec 21 '12 at 12:01

One alternate approach would be to fetch the image data via AJAX as a base64 encoded png and apply it to the element's background-image property.

For example:

$.get('/getmyimage', function(data) {
    // data contains base64 encoded image
    // for ex: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

    $('#yourElement').css('background-image', 'url("' + data + '")');
});

You will also need a server side script that reads the image, converts it into base64 encoded png (and cache it maybe) and return the same.

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

Try this one...

Its a jQuery-Plugin which gives you control to wait for images to be loaded

Project-Home

Thread @ SO Official way to ask jQuery wait for all images to load before executing something

Answer @ SO (ShortLink)

edited May 23 '17 at 12:11

Community

1
1

answered May 29 '12 at 06:53

DerDu

688
1
13
25

1

This is really not an answer - all you are doing is linking to another post within the site... With a little more rep you'll be able to leave this kind of help in a comment... – Lix May 29 '12 at 08:15
Yes i know, but i don't want to post the soulution twice so don't vote it down just because its a link... its a solution ;-) perfectly worked for me on this question .. [did a little edit] – DerDu May 29 '12 at 11:35
1

You won't get any reputation from posting links to other peoples answers... If you like I'll post it as a comment for you. In any case, if an answer exists for another question that also answers this question that means that this question is a duplicate and it shouldn't exist in the first place... I'll remove my down vote but please don't post link only answers... – Lix May 29 '12 at 11:43
1

Alright i do my very best :-) thx and if you like add it as comment to the question – DerDu May 29 '12 at 12:18

score -1 · Answer 4 · answered Jan 28 '12 at 06:09

-1

this is untested code but try this:

$(document).ready(
 function() 
 {
   var imgSrc = $('theTargerElement').css('background-image');
   var imgTag = $('<img>').attr('src',imgSrc).appendTo( 'body' );
 }
);

$(document)
 .load( 
   function() 
   {
     // do stuff
   } 
  );

answered Jan 28 '12 at 06:09

Shaheer

2,105
4
25
39

Why not test it? – ggorlen Jul 03 '22 at 21:12

JS wait for CSS background image to load

4 Answers4