Script de préchargement d'images
1/5 (7 avis)
Vue 6 670 fois - Téléchargée 592 fois
Description
Un (autre) script de préchargement d'images, plutôt léger.
Commenté et modifiable a souhait.
Une seule fonction à appeler.
Je l'ai intégrée dans une page avec aperçus des images préchargées et barre de chargement.
Testé sous Chrome 6, Firefox 3.6 & Beta 4, IE9.
Voila j'espère qu'il pourra vous être utile !
Commenté et modifiable a souhait.
Une seule fonction à appeler.
Je l'ai intégrée dans une page avec aperçus des images préchargées et barre de chargement.
Testé sous Chrome 6, Firefox 3.6 & Beta 4, IE9.
Source / Exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Prechargement d'images</title> <script type="text/javascript"> function imageLoader(img, callback) // La fonction prend en realite en compte tout les arguments qui lui sont donné, chacun representant l'url d'une image { var count = img.length; var argv = img; var section = parseInt(100 / count); var width = 0; var span = new Array; var flag = new Array; var images = new Array; if(typeof(callback) != "function") callback = 0; progress(0);// Initialisation de la proggression à 0% for(var i in img) { // Pour chacune des images flag[i] = 0; loadImage(i); } function overview(index, parent) { // Fonction permettant l'affichage dans la lightbox au passage de la souris /** Visuel**/ if(parent.tagName != "SPAN") return 0; $("img-box").style.display = "block"; $("img-overview").src = images[index].src; parent.onmouseout = function() { $("img-box").style.display = "none"; $("img-overview").src = ""; } } function addElement(tag, parent) { // Fonctions qui raccourci la creation d'un element var elem = document.createElement(tag); return parent.appendChild(elem); } function $(id) { // Fonction raccourci de getElementById return document.getElementById(id); } function loadImage(i) { // Fonction recursive qui charge les images et ne modifie le code HTML qu'une fois l'image chargée if(flag[i] == 0) { // Initialisation (creation image) flag[i] = 1; images[i] = new Image; images[i].src = argv[i]; /** Visuel **/ span[i] = addElement("span", $("load-img")); span[i].innerHTML = "Chargement de : " + images[i].src + "... "; } if(flag[i] == 1) { // Boucle recursive if(images[i].complete) flag[i] = 2; setTimeout(function(){loadImage(i)}, 50); } else if(flag[i] == 2) { // Fin de la recursivite, l'image est chargée if(count == 1) { // Fin de chargement de la derniere image, FIN progress(100); // On affiche directement "100%" pour eviter d'avoir la troncature a 99% if(callback) // Appel du callback callback(); } else { --count; progress(width + section); } /** Visuel **/ span[i].innerHTML += "Chargement termine."; span[i].style.color = "#000000"; span[i].onmouseover = function(){overview(i, this);}; } } function progress(w) { // Fonction faisant avancé la barre de chargement width = w; /** Visuel **/ $("load-bar").style.width = width + "%"; $("load-bar").innerHTML = width + " %"; } } function init() { // Exemple d'appel de la fonction imageLoader( [ "http://www5.picturepush.com/photo/a/2135293/img/43-Sexy-Widescreen-Wallpapers-%5B1920-X-1080%5D/Sexy-Alessandra-Ambrosio-1280-x-800-widescreen0270.jpg", "http://www.actualite-de-stars.com/wp-content/uploads/2008/10/halle-berry-tenue-sexy-1405.jpg", "http://www.fredzone.org/wp-content/uploads/2010/07/google-android-3-0-gingerbread.png", "http://sexy89.s.e.pic.centerblog.net/ry3cy1my.jpg", "http://www.jeux-poker.tv/wp-content/uploads/2009/01/sexy_poker2.jpg", "http://www.therallyshack.co.uk/images/hand%20made%20corsets/1126%20Blue%20sexy%20corset.jpg", "http://desifly.com/files/pictures/2009/03/erotic2_full.jpg" ], function(){} ); } </script> <style type="text/css"> span{ display: block; cursor: pointer; } span:hover{ text-decoration: underline; } </style> </head> <body style="font-family: sans-serif;" onload="init();"> <div style="position: absolute; left: 50%; top: 50%; width: 400px; height: 36px; margin-left: -200px; margin-top: -18px; border: #000000 1px solid;"> <div id="load-bar" style="width: 0%; height: 100%; background-color: #FC0000; text-align: center; line-height: 36px; color: #FFFFFF; font-weight: bold;"></div> </div> <div id="load-img" style="color: #FC0000; font-size: 12px;"></div> <div id="img-box" style="position: absolute; z-index: 8; left: 50%; top: 50%; width: 600px; height: 400px; margin-left: -300px; margin-top: -200px; display: none; border: 6px #FFFFFF solid; text-align: center; -webkit-box-shadow: 0px 0px 4px #000000; -moz-box-shadow: 0px 0px 4px #000000; background: #FFFFFF;"> <img id="img-overview" style="max-width: 600px; max-height: 400px;" src="" /> </div> </body> </html>
Conclusion :
Voila j'espère qu'il pourra vous être utile !
30 oct. 2010 à 10:34
ça fonctionne super bien !!!
j'ai adapté ça à mes besoins
merci heycraft.
26 oct. 2010 à 10:28
Niquel ton script !! Il m'est super utile (et en plus il a de zouli zimages :p ) !!
Petitkoalak
25 oct. 2010 à 12:21
25 oct. 2010 à 11:52
J'éspère qu'il fonctionnera pour tous.
25 oct. 2010 à 11:32
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.