Bonjour à tous,
Voici un défi de programmation,
sans doute java script, pour qui voudra bien le tenter :
Sur la page d'accueil de présentation d'un artiste,
J'ai un diaporama en java script récupéré sur le web.
Ce diaporama présente 100 œuvres de l'artiste en 400x400 pixels
Avec enchaînement fondu
Et fonctionne parfaitement bien.
Mais comme chacun voudra bien s'en douter,
Il est très long à charger, et pendant cette attente, seul le texte de présentation est visible.
Pour faire attendre le visiteur de façon dynamique et ludique,
Je voudrais installer un témoin de préchargement :
A l'intérieur du cadre 400x400 dans lequel doivent défiler les images du diaporama,
Je voudrais faire apparaître une par une les icônes des images du diaporama,
Au fur et à mesure du préchargement complet de chaque image,
Soit 100 icônes de 40x40 pixels,
Ceci de façon apparemment aléatoire et non pas ligne par ligne,
C'est-à-dire dispersées dans le cadre 400x400 jusqu'à le remplir totalement.
Lorsque la 100ème icône apparaît
témoignant donc de la fin du préchargement des 100 images 400x400 du diaporama,
Le diaporama démarre et la première image remplace le puzzle ainsi complété .
Ci-dessous le script complet (HTML et java) de la page d'accueil existante.
C'est une simple table à 5 colonnes et une rangée
3 colonnes (cellules) sont vierges et servent uniquement de marges
1 cellule renferme le texte de présentation avec un logo au milieu
L'autre cellule, la 4ème sert de cadre au diaporama
Qui pourra le compléter pour obtenir l'animation décrite ?
<code>
<HTML><HEAD><TITLE>
Untitled Document
</TITLE><BASE href=http://mydomain.com/></BASE><META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><META content="MSHTML 6.00.6000.16587" name=GENERATOR><SCRIPT src="C:\WINDOWS\xpopup.js" type=text/javascript></SCRIPT><SCRIPT language=wep_no_script src="C:\WINDOWS\xpopup.js" type=text/javascript></SCRIPT><SCRIPT language=wep_no_script>// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully
// =======================================
// Changer les variables suivantes
// =======================================
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000
// Duration of crossfade (seconds)
var crossFadeDuration = 3
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = '../images/0.jpg'
Pic[1] = '../images/1.jpg'
Pic[2] = '../images/2.jpg'
Pic[3] = '../images/3.jpg'
Pic[4] = '../images/4.jpg'
Pic[5] = '../images/5.jpg'
Pic[6] = '../images/6.jpg'
Pic[7] = '../images/7.jpg'
Pic[8] = '../images/8jpg'
Pic[9] = '../images/9.jpg'
Pic[10] = '../images/10.jpg'
Pic[11] = '../images/11.jpg'
Pic[12] = '../images/12.jpg'
Pic[13] = '../images/13.jpg'
Pic[14] = '../images/14.jpg'
Pic[15] = '../images/15.jpg'
Pic[16] = '../images/16.jpg'
Pic[17] = '../images/17.jpg'
Pic[18] = '../images/18.jpg'
Pic[19] = '../images/19.jpg'
Pic[20] = '../images/20.jpg'
Pic[21] = '../images/21.jpg'
Pic[22] = '../images/22.jpg'
Pic[23] = '../images/23.jpg'
Pic[24] = '../images/24.jpg'
Pic[25] = '../images/25.jpg'
Pic[26] = '../images/26.jpg'
Pic[27] = '../images/27.jpg'
Pic[28] = '../images/28.jpg'
Pic[29] = '../images/29.jpg'
Pic[30] = '../images/30.jpg'
Pic[31] = '../images/31.jpg'
Pic[32] = '../images/32.jpg'
Pic[33] = '../images/33.jpg'
Pic[34] = '../images/34.jpg'
Pic[35] = '../images/35.jpg'
Pic[36] = '../images/36.jpg'
Pic[37] = '../images/37.jpg'
Pic[38] = '../images/38.jpg'
Pic[39] = '../images/39.jpg'
Pic[40] = '../images/40.jpg'
Pic[41] = '../images/41.jpg'
Pic[42] = '../images/42.jpg'
Pic[43] = '../images/43hommerouge_femmebleue2005.jpg'
Pic[44] = '../images/44.jpg'
Pic[45] = '../images/45.jpg'
Pic[46] = '../images/46.jpg'
Pic[47] = '../images/47.jpg'
Pic[48] = '../images/48.jpg'
Pic[49] = '../images/49.jpg'
Pic[50] = '../images/50.jpg'
Pic[51] = '../images/51.jpg'
Pic[52] = '../images/52.jpg'
Pic[53] = '../images/53.jpg'
Pic[54] = '../images/54.jpg'
Pic[55] = '../images/55.jpg'
Pic[56] = '../images/56.jpg'
Pic[57] = '../images/57.jpg'
Pic[58] = '../images/58.jpg'
Pic[59] = '../images/59.jpg'
Pic[60] = '../images/60.jpg'
Pic[61] = '../images/61.jpg'
Pic[62] = '../images/62.jpg'
Pic[63] = '../images/63.jpg'
Pic[64] = '../images/64.jpg'
Pic[65] = '../images/65.jpg'
Pic[66] = '../images/66.jpg'
Pic[67] = '../images/67.jpg'
Pic[68] = '../images/68.jpg'
Pic[69] = '../images/69.jpg'
Pic[70] = '../images/70.jpg'
Pic[71] = '../images/71.jpg'
Pic[72] = '../images/72.jpg'
Pic[73] = '../images/73.jpg'
Pic[74] = '../images/74.jpg'
Pic[75] = '../images/75.jpg'
Pic[76] = '../images/76.jpg'
Pic[77] = '../images/77.jpg'
Pic[78] = '../images/78.jpg'
Pic[79] = '../images/79.jpg'
Pic[80] = '../images/80.jpg'
Pic[81] = '../images/81.jpg'
Pic[82] = '../images/82.jpg'
Pic[83] = '../images/83.jpg'
Pic[84] = '../images/84.jpg'
Pic[85] = '../images/85.jpg'
Pic[86] = '../images/86.jpg'
Pic[87] = '../images/87.jpg'
Pic[88] = '../images/88.jpg'
Pic[89] = '../images/89.jpg'
Pic[90] = '../images/90.jpg'
Pic[91] = '../images/91.jpg'
Pic[92] = '../images/92.jpg'
Pic[93] = '../images/93.jpg'
Pic[94] = '../images/94.jpg'
Pic[95] = '../images/95.jpg'
Pic[96] = '../images/96.jpg'
Pic[97] = '../images/97.jpg'
Pic[98] = '../images/98.jpg'
Pic[99] = '../images/99.jpg'
Pic[100] = '../images/100.jpg'
// =======================================
// Ne rien éditer au-dessous de cette ligne
// =======================================
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</SCRIPT>
</HEAD>
<BODY text=#ffffff bgColor=#000000 onload=runSlideShow()>
<TABLE cellSpacing=2 cellPadding=2 width="100%" border=0>
<TBODY>
<TR>
<TD width=50></TD>
<TD>
<P align=left><FONT face="Times New Roman"><FONT size=1>
texte descriptif français.
<BR><BR>
<TABLE cellSpacing=2 cellPadding=2 width=200 align=center border=0><TBODY><TR><TD><P align=center><IMG src="./images/logo.jpg">
</P></TD></TR></TBODY></TABLE><BR></P>
<P align=left><FONT face="Times New Roman" color=#0000cd size=2><FONT color=#6495ed size=1>
texte descriptif anglais
<BR>
</FONT>
</P></FONT>
</TD><TD width=50></TD><TD id=VU width=400 height=400><IMG height=400 src="1.jpg" width=400 name=SlideShow>
</TD><TD width=150></TD></TR></TBODY></TABLE>
<SCRIPT language=wep_no_script type=text/javascript>_popupControl();
</SCRIPT></BODY></HTML>
</code>