web-dev-qa-db-fra.com

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

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?

javascriptjquery
133
Peter

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 l'événement load pour détecter quand le fichier src est chargé.

252
jcubic

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);
22
alex

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();
      });
  }
});
15
Colin

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

11
Adrian Pacala

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

Lire l'article:

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

ou allez directement au code du plugin:

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

Il suffit donc d'inclure le plugin et de l'appeler ensuite 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 stockez-le sur votre propre hébergement.

Par défaut, il ajoute une classe "chargée par bg" à chaque élément mis en correspondance une fois que l'arrière-plan est chargé, mais vous pouvez facilement le modifier en lui transmettant une fonction différente, comme ceci:

<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 le prouvant.

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

6
Jon Catmull

J'ai trouvé une solution qui fonctionnait mieux pour moi et qui présente l'avantage de pouvoir être utilisée avec plusieurs images (cas non illustré dans cet exemple).

De la réponse de @ adeneo sur cette question :

Si vous avez un élément avec une image de fond, comme ceci

<div id="test" style="background-image: url(link/to/image.png)"><div>

Vous pouvez attendre le chargement de l'arrière-plan en récupérant l'URL de l'image et l'utiliser pour un objet image en javascript avec un gestionnaire de chargement

var src = $('#test').css('background-image');
var url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,'');

var img = new Image();
img.onload = function() {
    alert('image loaded');
}
img.src = url;
if (img.complete) img.onload();
3
Paperjuice

https://github.com/alexanderdickson/waitForImages

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

J'ai fait un hack pur en javascript 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>

Ou

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

css:

.image_error {
    display: none;
}
2
Gino

solution JS pure qui va ajouter un préchargeur, définir l’image d’arrière-plan, puis le configurer pour la récupération de place ainsi que son écouteur d’événements :

const imageUrl = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
let bgElement = document.querySelector("body");
bgElement.classList.add("loading");
let preloaderImg = document.createElement("img");
preloaderImg.src = imageUrl;

preloaderImg.addEventListener('load', (event) => {
  bgElement.classList.remove("loading");
  bgElement.classList.add("loaded");
  bgElement.style.backgroundImage = `url(${imageUrl})`;
  preloaderImg = null;
});
.loading {
  opacity: 0;
  transition: opacity .4s ease-out;
}

.loaded {
  opacity: 1;
}

0
godblessstrawberry