1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Graphique
  5. Script de préchargement d'images

Script de préchargement d'images

Soyez le premier à donner votre avis sur cette source.

Vue 6 451 fois - Téléchargée 576 fois

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

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

merci heycraft.
Signaler
Messages postés
1
Date d'inscription
mardi 22 juin 2010
Statut
Membre
Dernière intervention
26 octobre 2010
Salut,

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

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

J'éspère qu'il fonctionnera pour tous.
Signaler
Messages postés
58
Date d'inscription
vendredi 29 août 2003
Statut
Membre
Dernière intervention
25 octobre 2010
Firefox 3.6.11
Afficher les 7 commentaires
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)