Wenn Bilder ändern Hintergrund geladen, jQuery

Question

Ich versuche, eine Funktion zu schreiben, die einmal das letzte Bild in einem Element geladen wird es als die Eltern Hintergrundbild legt scheinen ich kann nur arbeiten, es zu bekommen ...

Ich kann die Quelle warnen, aber aus irgendeinem Grund die Eltern nicht ohne Konsolenfehler beeinflussen?

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(); 

Answer 1

Sie brauchen nicht so weit jede Schleife haben. Ich weiß auch nicht, was du meinst von

!elem.prop('complete')

Wenn Sie Trog Schleife alle Bilder wollen und überprüfen, ob sie geladen sind, das ist, was Sie brauchen:

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(); 

Aber wir tun es nicht Holen Sie sich die console.log "geladenes Bild!". Dies liegt wahrscheinlich daran, dass die Bilder bereits geladen sind, bevor diese Funktion einsetzt. Auch das Onload funktioniert asynchron, so dass die $ .each-Schleife fortgesetzt wird. Sie könnten eine globale Variable festlegen und das Bild in diese schreiben, anstatt in die Datei console.log . Dann wissen Sie, welcher zuletzt geladen wurde, aber seit dem asynchronen Aufruf müssen Sie eine andere Funktion aufrufen, die prüft, ob alle Bilder geladen sind.

Auf jeden Fall richtig CSS-Stil background-image: url('...') setzen Sie verpasst auch: je immer

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