Retourner à la page d'accueil de TJS

Script preload : Préchargement d'images dans le cache du navigateur

Préchargement d'images dans le cache du navigateur et détection de la fin du chargement
Partie II : L'interactivité / Chapitre 12 : Manipuler le document / Page 192

Exécution du script

Emulation de la console

Code source

<html><head><title>Préchargement d'images</title><script type="text/javascript">/* Constructeur de Preload */function Preload(images, callback=null) {  this.images=[];  this.nbLoaded=0;  this.callback=callback;  for (var i=0; i<images.length; i++) {    this.images[i]=new Image();         this.images[i].src=images[i];    var thisPreload=this;  /* Sauvegarde du this dans le contexte du onload */    this.images[i].onload = function(evt) {      console.log("Image "+this.src+" loaded ");      thisPreload.nbLoaded++;      if (thisPreload.nbLoaded==thisPreload.images.length) {        /* Toutes les images sont chargées : lancement de l'éventuelle callback */        if (typeof thisPreload.callback === "function") {           thisPreload.callback();         }      }    }  }}/* Lancement du préchargement */var images=["media/image1.gif","media/image2.gif","media/image3.gif"];var preload = new Preload(images, function() { console.log("Préchargement terminé"); document.getElementById("end").innerHTML="Préchargement terminé";});</script></head><body>  <h1>Préchargement d'images avec détection de fin de chargement</h1>  <div id="end"></div></body></html>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 22/08/2019 13:08:51 sur php7 en 44.04 ms