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 ?
<HTML><HEAD><TITLE>
Untitled Document</TITLE>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>
----
,
texte descriptif français.
<TABLE cellSpacing=2 cellPadding=2 width=200 align=center border=0>
----
,
</TD>
texte descriptif anglais
</TD>
<TD width=50></TD>
<TD id=VU width=400 height=400>
</TD>
<TD width=150></TD></TR></TBODY></TABLE>
<SCRIPT language=wep_no_script type=text/javascript>_popupControl();</SCRIPT>
</HTML>
Afficher la suite
