11521 sujets

JavaScript, DOM et API Web HTML5

Simplifier l'écriture d'un preload d'images

Bonjour,
j'ai rédigé un slideshow en JS et CSS3 qui fonctionne bien
http://sentrais.eu/diaporama_v-7/diaporama-7.htm
avec un preload de ses 9 images.

Accessoirement, un script minimaliste visualise une barre de progression du preload, de 10 en 10px. Cette barre change ensuite de couleur aussitôt que le preload soit achevé (<1s/2.4Mo pour une connexion à débit "normal"), puis disparaît gentiment.

Je me suis bien assuré que la mesure du preload progressif ne soit pas une sonde Pitot gélive d'AirBus, ou inerte d'eau vide de la centrale nucléaire de Fukushima ou de Three Mile Island : ce serait un vilain programme initial ...

Or tout semble vraiment bien fonctionner, mais-mais-mais je "sèche" pour l'écriture d'une boucle qui simplifierait avec bonheur cette écriture si d'aventure le diaporama proposait plusieurs dizaines d'images.

Auriez-vous une bonne idée, et notamment pour la fonction barre() qui, déjà s'écrit méthodiquement 9 x ?

Merci.

Entretemps, voici le script actuel :
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
var img4 = new Image();
var img5 = new Image();
var img6 = new Image();
var img7 = new Image();
var img8 = new Image();
var img9 = new Image();

	function barre()
{
var b = document.getElementById("barre");
var t = document.getElementById("temoin");
var curr_width = parseInt(t.style.width); // Supprime le "px" et ne conserve que la valeur absolue ...
t.style.width = (curr_width + 10) +"px";	// pour lui additionner 10.
w = t.style.width;
if(w == "90px" || !w)	// Au chargement achevé (9x10px=90px) ...
	{
t.style.background="lime";	// la barre change de couleur ...
setTimeout(function(){b.style.opacity="0";b.style.transition="opacity ease 3s"},500) // puis elle disparaît.
	}
}

	// Applique la progression de la barre de chargement, de 10px en 10px
img1.onload=barre;
img2.onload=barre;
img3.onload=barre;
img4.onload=barre;
img5.onload=barre;
img6.onload=barre;
img7.onload=barre;
img8.onload=barre;
img9.onload=barre;

	// Charge les images
img1.src = 'i1.png';
img2.src = 'i2.png';
img3.src = 'i3.png';
img4.src = 'i4.png';
img5.src = 'i5.png';
img6.src = 'i6.png';
img7.src = 'i7.png';
img8.src = 'i8.png';
img9.src = 'i9.png';

Modifié par pictural (29 Oct 2016 - 16:50)
Hello !

Au lieu de mettre tes images chacunes dans une variable différente, tu peux les mettre dans un tableau :

let images = [];


Ensuite, ça devient très facile de boucler dessus. Exemple :

for (let i = 0; i < 9; i++) {
    images[i] = new Image();
}


Ou encore :

for (let i = 0; i < 9; i++) {
    images[i].src = "i" + (i+1) + ".png";
}
[/i][/i]
@GuillaumeBauer,

Je sens qu'un let va m'éclairer, mais là, je ne comprends pas, yu !

Car quoi faire
ou que faire d'un carquois
quand j'ai toujours mes images dans mille tableaux
quand quoi faire
sans rire ni pleurer
j'ai quoi faire d'un tableau pour mille images
tu go trop vite
tu go trop haut
d'un quoi car
quand j'ai un tableau pour mille images
j'ai quoi faire car
quand j'ai trop-plein d'images dans un plein de tableaux

let m'éclaire ici ;
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/let

D'un coup de ce let j'y travaille ... Puis je reviendrai vers vous.
Modifié par pictural (30 Oct 2016 - 00:58)
Bon, je progresse comme ceci qui est attesté :
http://sentrais.eu/diaporama_v-8/diaporama-8.htm 
	function barre()
{
var b = document.getElementById("barre");
var t = document.getElementById("temoin");
var curr_width = parseInt(t.style.width); // Supprime le "px" et ne conserve que la valeur absolue ...
t.style.width = (curr_width + 10) +"px";	// pour lui additionner 10.
w = t.style.width;
if(w == "90px" || !w)	// Au chargement achevé (9x10px=90px) ...
	{
t.style.background="lime";	// la barre change de couleur ...
setTimeout(function(){b.style.opacity="0";b.style.transition="opacity ease 3s"},500) // puis disparaît.
	}
}

var images = new Array();

	function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image();
images[i].src = preload.arguments[i];
images[i].onload=barre;  // Auto-itère 9x (par l'onload d'1 img) la barre de chargement, jusqu'à width="90px", ce qui était espéré.
	}
}

preload(
"i1.png",
"i2.png",
"i3.png",
"i4.png",
"i5.png",
"i6.png",
"i7.png",
"i8.png",
"i9.png"
)
Il me resterait encore à intégrer les arguments dans la boucle initiale, mais la modification actuelle me procure déjà toute sorte de satisfaction raisonnable.

Vérification faite sur le cache du navigateur préalablement vidé, les 9 images sont effectivement "preloadées" et mises en cache lors de l'ouverture de la page. Par exemple avec FireFox :
1. url = about:cache
2. Outils -> Développement web -> Réseau

Ensuite au re-chargement de la page, la barre de progression du preload présente un comportement différent, qui invite à croire que les 9 images sont déjà bien présentes dans le cache du navigateur ... Vérif dans FireFox : url -> about:cache où toutes les img sont attestées.

Le [ i ] pour italique des posts fait toujours désordre dans les codes ... La démonstration ?
Ceci, que je n'ai point écrit : [/i][/i][/i][/i]
Modifié par pictural (04 Nov 2016 - 19:49)
Sujet clos
Aller à