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.

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 !

Codes Sources

A voir également

Ajouter un commentaire Commentaires
romycode Messages postés 2 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 30 octobre 2010
30 oct. 2010 à 10:34
salut !!
ça fonctionne super bien !!!
j'ai adapté ça à mes besoins

merci heycraft.
petitkoalak Messages postés 1 Date d'inscription mardi 22 juin 2010 Statut Membre Dernière intervention 26 octobre 2010
26 oct. 2010 à 10:28
Salut,

Niquel ton script !! Il m'est super utile (et en plus il a de zouli zimages :p ) !!

Petitkoalak
cs_armenak Messages postés 58 Date d'inscription vendredi 29 août 2003 Statut Membre Dernière intervention 25 octobre 2010
25 oct. 2010 à 12:21
Bravo et merci. Avec un peu d'adaptation, c'est un script fort utile.
cs_heycraft Messages postés 4 Date d'inscription mardi 20 juillet 2010 Statut Membre Dernière intervention 27 octobre 2010
25 oct. 2010 à 11:52
Voila pour la correction.

J'éspère qu'il fonctionnera pour tous.
cs_armenak Messages postés 58 Date d'inscription vendredi 29 août 2003 Statut Membre Dernière intervention 25 octobre 2010
25 oct. 2010 à 11:32
Firefox 3.6.11
Afficher les 7 commentaires

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.