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