Preloader,
Fermé
Vincentlpt
Messages postés
48
Date d'inscription
jeudi 18 juin 2015
Statut
Membre
Dernière intervention
29 décembre 2018
-
29 déc. 2018 à 11:53
chopa - 20 janv. 2019 à 10:42
chopa - 20 janv. 2019 à 10:42
1 réponse
Salut,
non en effet ce n'est pas très clair, par exemple ce point là:
" de faire un preloader. Il s'agit en faite de l'ouverture d'un diaphragme d'appareil photo qui une fois ouvert afficherai ma page web. "
S'il n'y a pas de page web(affichée) il n'y a pas de JavaScript.
le préchargement avec JavaScript c'est par exemple pour des images d'indiquer qu'elles existent ou tout début de la page, ainsi avant que la page ait besoin de les afficher elles seront déjà dans le cache du navigateur, par exemple avec body. o n l o a d(sans espace)
non en effet ce n'est pas très clair, par exemple ce point là:
" de faire un preloader. Il s'agit en faite de l'ouverture d'un diaphragme d'appareil photo qui une fois ouvert afficherai ma page web. "
S'il n'y a pas de page web(affichée) il n'y a pas de JavaScript.
le préchargement avec JavaScript c'est par exemple pour des images d'indiquer qu'elles existent ou tout début de la page, ainsi avant que la page ait besoin de les afficher elles seront déjà dans le cache du navigateur, par exemple avec body. o n l o a d(sans espace)
Modifié le 20 janv. 2019 à 10:52
<html> <head> <script> /** on utilise l'événement onload sur l'object/élément body de la page body.onload=function(){ /** le script ici est lu au début de la page, il pourrait très bien être au début du body, je l'ai mis dans head pour bien mettre en évidence mais il se déclenchera/sera interprété donc lors qu'il sera lu et que le body de la page commence à être chargé. */ let prechargementImages=image.jpg; /* plus ou moins équivalent mais en utilisant la notation objet pour image */ let imagePreloader=new Image(); imagePreloader.src=image.png; } /** pour plusieurs image on peut utiliser un tableau(Array) de la même façon à la place d'une variable (notez let est équivalent à var en ECMA6 et > */ </script> </head> <body> <!-- une fois le body chargé les fichiers images indiqués dans le script sont déjà accessible puisque dans le cache du navigateur appelé par le JavaScript en tant que variable --> <img src="image.jpg" alt="description"/> <img src="image.png" alt="description"/> </body> </html>Avec une fonction ça peut donner ça :
function preloadImages(){ if(document.images){ let tabimages=new Array(); for(let i= 0;i<preloadImages.arguments;i++){ tabimages[i]=new Image(); tabimages[i].src=preload.arguments[i]; console.log(i+' preloaded ',tabimages[i].src); } return tabimages; } } //-- sans oublier de l'utiliser au sein(fonction) de l'écouteur/événement onload du body //-- comme ceci: let listeDesImages; body.onload=function(){ listeDesImages = preloadImages(image1.jpg,image2.png, image3.gif); } alert('la première image est '+listeDesImages[0].src+' , nombre images préchargées: '+listeDesImages.length);Pour lier le chargement à une barre de progression on peut calculer le nombre d'images:
https://codes-sources.commentcamarche.net/source/17161-preload-d-une-page-avec-barre-de-progression
Mais ça ne marchera pas pour une image puisqu'il n'y aura que l'état chargé/pas chargé de détecté.
Pour ça il faut obtenir et nombre de bytes de l'image(ou n'importe quel fichier à précharger c'est pareil) et obtenir le nombre de bytes actuel(qui sont déjà chargé) , en calculant le rapport bytes chargé sur bytes total on obtient ainsi le vrai état du chargement(dans une boucle jusqu'au chargement total des images). Pour ça il y a arrayBuffer. Ici un exemple qui utilise AJAX afin d'avoir la "conversation" avec le serveur et qui est un vrai pré/chargement de l'image avec donc l'avancement de son chargement par rapport à l'envoi avec le serveur:
https://stackoverflow.com/questions/14218607/javascript-loading-progress-of-an-image
20 janv. 2019 à 10:42