Est-ce une manière correcte de précharger une image dans Javascript/Jquery (avec animation)?

J'essaie d'afficher une animation de base pendant le chargement d'une image, en html.

Est-ce la bonne façon de le faire?

      //display the (small image) animation
      var preloader = new Image();
      preloader.src = 'img/preload.gif';
      $('#myDiv').append(preloader);

      //load big image and hide peload animation when finished
      var img = new Image();
      img.onload = function() { $(preloader).hide(); preloader = null; } ;
      img.src = 'img/bigImage.jpg';
      $('#myDiv').append(img);

Je ne suis pas sûr que ce soit correct: bien que cela fonctionne dans mon navigateur, la petite animation est toujours chargée, même si la grande image a déjà été chargée et est dans le cache. Y at-il un moyen de désactiver ceci, ou de penser ou d'une autre manière de gérer le préchargement d'une image avec une petite animation?

Merci

0
Vous pouvez démarrer un délai de 100ms puis vérifier si l'image a été chargée.
ajouté l'auteur vorrtex, source

1 Réponses

Voici comment je le ferais:

var preloader = new Image(),
    img       = new Image(),
    div       = document.getElementById('myDiv');

img.onload = function() {
    preloader = null; 
    div.innerHTML = '';
    div.appendChild(this);
};

img.src = 'img/bigImage.jpg';

// if it's not in cache or not loaded (has no size), show the preloader
if (! (img.complete || img.width+img.height > 0) ) {
    preloader.src = 'img/preload.gif';
    div.innerHTML = '';
    div.appendChild(preloader);
}
0
ajouté
Très beau effectivement! Merci
ajouté l'auteur carmellose, source
Je voudrais juste noter que quelque chose de sympa à ce sujet est que cela ne force pas le navigateur à vérifier l'état en cache d'une ressource d'image quand vous le faites par exemple, en ré-affectant le src attribut d'un img à une autre URL. Par exemple. var i = nouvelle Image (); i.src = 'http://path.to/img.jpg' . Ce qui m'a aidé pendant que je cherchais une solution juste pour cela.
ajouté l'auteur dougBTV, source