Script de préchargement d'images

Télécharger le projet
Commenter

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 !
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (cs_heycraft)