<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>
En savoir plus
cleanMyJS.com