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

Je souhaite définir une image d'arrière-plan sur l'étiquette du corps, puis exécuter un 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 de fond est entièrement chargée?

essaye ça:

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

Cela créera une nouvelle image en mémoire et utilisera un événement de chargement pour détecter le chargement du src.

J'ai un plugin jQuery appelé waitForImages qui peut détecter lorsque les images d'arrière-plan ont été téléchargées.

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

Quelque chose comme ça:

 var $div = $('div'), bg = $div.css('background-image'); if (bg) { var src = bg.replace(/(^url\()|(\)$|[\"\'])/g, ''), $img = $('<img>').attr('src', src).on('load', function() { // do something, maybe: $div.fadeIn(); }); } });

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

Voici un petit plugin que j'ai créé pour vous permettre de faire exactement cela, il fonctionne également sur plusieurs images d'arrière-plan et plusieurs éléments:

Lire l'article:

http://catmull.uk/code-lab/background-image-loaded/

Ou allez directement au code de plugin:

http://catmull.uk/downloads/bg-loaded/bg-loaded.js

Alors, incluez simplement le plugin, puis appelez-le sur l'élément:

 <script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script> <script type="text/javascript"> $('body').bgLoaded(); </script>

Évidemment, téléchargez le plugin et rangez-le sur votre propre hébergement.

Par défaut, il ajoute une classe supplémentaire "bg-loaded" à chaque élément apparié une fois que l'arrière-plan est chargé, mais vous pouvez facilement le modifier en lui transférant une fonction différente comme celle-ci:

 <script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script> <script type="text/javascript"> $('body').bgLoaded({ afterLoaded : function() { alert('Background image done loading'); } }); </script>

Voici un codepen démontrant qu'il fonctionne.

http://codepen.io/catmull/pen/Lfcpb

J'ai fait un piratage javascript pur pour rendre cela possible.

 <div class="my_background_image" style="background-image: url(broken-image.jpg)"> <img class="image_error" src="broken-image.jpg" onerror="this.parentElement.style.display='none';"> </div>

 onerror="this.parentElement.backgroundImage = "url('image_placeHolder.png')";

Css:

 .image_error { display: none; }

https://github.com/alexanderdickson/waitForImages

 $('selector').waitForImages({ finished: function() { // ... }, each: function() { // ... }, waitForAll: true });