Comment puis-je vérifier si une image d'arrière-plan est chargée?

Question

Je veux définir une image d'arrière-plan sur la balise body, puis exécuter du code - comme ceci:

 $('body').css('background-image','http://picture.de/image.png').load(function() {
    alert('Background image done loading');
    // This doesn't work
});
 

Comment puis-je m'assurer que l'image d'arrière-plan est complètement chargée?

Answer 1

essaye ça:

 $('<img/>').attr('src', 'http://picture.de/image.png').load(function() {
   $(this).remove(); // prevent memory leaks as @benweet suggested
   $('body').css('background-image', 'url(http://picture.de/image.png)');
});
 

Answer 2

J'ai un plugin jQuery appelé waitForImages qui peut détecter le téléchargement des images d'arrière-plan.

 $('body')
  .css('background-image','url(http://picture.de/image.png)')
  .waitForImages(function() {
    alert('Background image done loading');
    // This *does* work
  }, $.noop, true);
 

Answer 3

Il n'y a pas de callback JS pour les actifs CSS.

Answer 4

Car: