CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 14:48:12

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

SCRIPT DE PRÉCHARGEMENT D'IMAGES

Information sur la source

Note :

9,50 / 10

Catégorie :Graphique Classé sous :images, pré-chargement, lightbox, loader, chargement images Niveau :Initié Date de création :21/10/2010 Date de mise à jour :25/10/2010 11:50:26 Vu / téléchargé :4 191 / 415

Auteur : heycraft

Ecrire un message privé

Commentaire sur cette source (7)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

<!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>

<!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 !

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

image-preloader.html 4 848 octets

Télécharger le zip

Historique

22 octobre 2010 22:38:52 :: Ajout du fichierzip a downloader
25 octobre 2010 11:50:27 :: Mise à jour pour Firefox 3.6 Testé sous Firefox 3.6.11 (Ubuntu) Ajout d'un callback (fonction appelée à la fin du chargement

Sources du même auteur

SCROLLBAR CLASS

SCRATCH AREA

RÉCUPERER LES VARIABLES $_GET

JOLIE ALERTE AVEC "ALERT()"

Toutes les sources de heycraft

Sources de la même categorie

JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator

SPHERE 3D DÉFORMABLE par phm

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma

CALCULATRICE HEURE par m22001111

Toutes les sources de la catégorie Graphique

Sources en rapport avec celle ci

SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT par ansuzpeorth

CENTRAGE D'IMAGE AVEC PETIT EFFET par kazma

LIGHTBOX DIAPORAMA par kazma

FAIRE DEFILER DES IMAGE A LA MOLETTE OU SOURIS par kazma

[-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47

Commentaires et avis

Commentaire de armenak le 25/10/2010 10:42:39

ben ça marche pas...

Commentaire de heycraft le 25/10/2010 11:25:04

Sur quel navigateur s'il vous plait?

Je peux faire la modif pour qu'il fonctionne. J'en profiterai pour rajouter une fonction CallBack.

Commentaire de armenak le 25/10/2010 11:32:17

Firefox 3.6.11

Commentaire de heycraft le 25/10/2010 11:52:04

Voila pour la correction.

J'éspère qu'il fonctionnera pour tous.

Commentaire de armenak le 25/10/2010 12:21:55 9/10

Bravo et merci. Avec un peu d'adaptation, c'est un script fort utile.

Commentaire de petitkoalak le 26/10/2010 10:28:48 10/10

Salut,

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

Petitkoalak

Commentaire de romycode le 30/10/2010 10:34:25

salut !!
ça fonctionne super bien !!!
j'ai adapté ça à mes besoins

merci heycraft.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Lightbox help-me ! [ par nanouk21 ] Je débute mais voilà j'ai réalisé mon premier site et m'attaque à un second dans lequel je souhaite insérer un slide show (le même tyle que dans mon p menu et images dynamiques [ par tapi ] Bonjour,Je cherche à créer une page html avec à gauche un menu (5 lignes de textes) et lorsque l'on passe la souris sur une des lignes, des images cha Display:none et images [ par sonofgod2 ] Bonjour,j'ai recement découvert un petit script qui me permet d'afficher ou de cacher des Divs, et ça pour les sites internet c'est trés appréciable : Ouverture de page avec sript lightbox [ par yberges ] bonjour a tous voila sur mon sitehttp://www.le-bijou.net j'ai un lecteur mp3 comme mes page ce rechargent souvent pour pouvoir écouter en continu la m Problème sur un diaporama : images décalées [ par niscemie ] Bonjour, Je suis graphiste et je suis amenée à intégrer un petit diaporama sur une page. J'ai donc trouvé un script simple qui me permettait d'affiche refresh images aléatoires [ par deud5 ] Bonjour,J'ai des images dans un tableau comme ceci (voici une cellule) :<td width="250"><div align="center"><span class="Style6"> selection d'images ayant une classe particulière [ par med76 ] Bonjour,J'essaie d'externaliser totalement mon javaScript, et je rencontre un petit problème avec une fonction.En effet, j'aimerais afficher une alert bandeau d'images [ par roumens ] Bonjour,Alors là... vous lisez le méssage du plus débutant des débutants, d'ailleurs je ne suis pas sur d'etre dans le bon theme pour poser ma questio Lightbox, MOOdalBox: ne marche pas dans ma page AJAX [ par niminims ] Bonsoir à tous! J'ai essayé pleins de methode de "box": comme MOOdalBox par exemple. Si je test ma page normalement, direct, http://www.monsite.com/pa aligner les images horizontalement [ par oceane751 ] bonjour à tous avec le code qui suit, mes images defilent de façon verticale mais je voudrais que ces images défilent horizontalement voici le c

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP