When images loaded change background, jQuery

Question

I'm trying to write a function that once the last image in an element is loaded it sets it as the parents background image only I cant seem to get it working...

I can alert the source but for some reason not affect the parent with no console errors?

https://jsfiddle.net/09ss43nx/1/

function swapImage(){

var elem = $('.team-member img:last-child');
if (!elem.prop('complete')) {
  console.log("Waiting to be loaded!");
  elem.on('load', function() {
    elem.parent().css('background-image', elem.attr('src'));
  });
} else {
  elem.parent().css('background-image', elem.attr('src'));
}

}

swapImage();

I don't think you will ever always know which image is going to load last, you can detect end of page load via jQuery, though, so if you were specific enough and chose the image beforehand you could simply check for window load then load that specified image. — Nathaniel Flick, Jun 10 '16 at 13:30
I think this will help you... [JQuery callback on image load](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached) — ArmKh, Jun 10 '16 at 13:31

Mick · Accepted Answer · 2016-06-10T14:00:42.747

You dont have any loop so far. Also i dont know what you mean by

!elem.prop('complete')

If you want to loop trough all images and check if they are loaded, that is what you need:

function swapImage(){
  var parents = $('.team-member');

  parents.each(function(i) {
    var images = $(this).find('img');

    images.each(function(i) {
        $(this).load(function() {
            console.log('loaded image!');
        });
    })
  });
}

swapImage();

But we don't get the console.log "loaded image!". This is probably because the images are already loaded before this function kicks in. Also the onload works asynchronous so the $.each-loop would continue. You could set a global variable and write the image into it instead of the console.log . Then you know which one was loaded last, but since its asynchronous, you need to call another function which checks if all images are loaded.

Anyway you also missed to set correct css-style background-image: url('...'):

elem.parent().css('background-image', 'url('+elem.attr('src')+')');

I edited my answer to give you a working loop with you can work with. — Mick, Jun 10 '16 at 13:56

When images loaded change background, jQuery

1 Answers1