Pré chargement d'une image

Bonjour à toute la communauté

Je solicite votre bienveillance et un peu de votre temps

Etat actuel de la situation :
5 liens pour afficher 5 images différentes à tour de rôle dans une même balise <img> (balise qui est elle-même dans une div).

1 2 3 4 5
|| BLOC IMAGE ||

Voici le code qui change l'image :

function ChangeThumb (id, nom)	{

   if(!document.getElementById) return; // on vérifie si JS
	
	document.getElementById("thumb").style.display = "none";
	document.getElementById("thumb").src = nom+'-0'+id+'.gif';
	
	for (i=1; i<=5; i++){  // on vide le nom de class
		document.getElementById("tn"+i).className = "";
	   } 

	 // on affiche la bonne image et on active le lien en cours
	document.getElementById("thumb").style.display = "inline";
	document.getElementById("tn"+id).className = "activ";
}

Le code pour activer le changement d'état :

<li><a href="reference_uni.html" id="tn1" onClick="ChangeThumb('1', 'img/ref/big/nom_fichier'); return false;" class="activ">1</a></li>

Dans la div qui contient la balise <img>, un background est parametré pour que le chargement de l'image soit indiqué et tout le problème est la !

Lorsque l'internaute clique sur le lien pour changer d'image, l arriere plan ne s'affiche pas, l'image précédente reste jusqu a ce que la suivant soit chargée malgré le document.getElementById("thumb").style.display = "none"; :'(
Modifié par devmike (26 Jan 2007 - 16:14)

salut,
js te permet de faire des preload d'image comme ça:

var myimages=new Array()
function preloadimages(){
for (j=0;j<preloadimages.arguments.length;j++){
myimages[j]=new Image()
myimages[j].src=preloadimages.arguments[j]
}
}
preloadimages("image1.png","image2.png");

Je crois que tu peux aussi le faire en mettant un balise avec une image dans ton html, mais je ne sais pas trop comment.
Modifié par matmat (26 Jan 2007 - 16:00)

ha ok j'avais pas bien compris alors pour faire ça (j'ai reussi a faire ce code grace a ce forum, et il est également utilisé sur lightbox) il faut faire comme ça:

function loadImage(){
  img.style.display = "none";
  ImagesLoader=new Image();
  ImagesLoader.onload = function() {
    img.style.display = "block";
  };
  ImagesLoader.src=img.src;
} 

ou "img" est l'image qui se charge, tu peux ainsi faire des effets d'apparition ou tout simplement pour mettre un loading:

loading.style.display = "inline";
          ImagesLoader=new Image();
          ImagesLoader.onload = function() {
                loading.style.display = "none";
                img.style.display = "inline";
          };
ImagesLoader.src=Lui.href;

ou loading est ton image de loading,
Modifié par matmat (26 Jan 2007 - 16:37)

a écrit :
Enfin je ne comprends pas ou est ce que je met les adresses de mes images, je doit leur mettre un id et remplacer img par cette id ??

c'est exactement ça, d'abord tu fais ton code html normal et ensuite tu viens agir sur celle ci avec un id par exemple:

function loadImage(){
  var monImage = document.getElementsById('iddemonimage')
  monImage.style.display = "none";
  ImagesLoader=new Image();
  ImagesLoader.onload = function() {
    //ton filtre d'opacitée
    Img.style.display = "block";
  };
  ImagesLoader.src= monImage.src;
}   

Modifié par matmat (29 Jan 2007 - 16:39)

Nikolours a écrit :
Quelle méthode serait la plus adapté a mon projet http://qa.nikolours.com/clean j'aimerais mettre une barre de progression en plus après avoir cliqué sur le lien.

En fait tu souhaites préloader tout ton site ??

Nikolours a écrit :
D'autre part j'ai vu une solution qui consistait à mettre les images au début du code de mettre un id css preload ou autre et de les afficher avec dimensions de 0. C'est pas vraiment du préchargement ca non? Pas moyen de mettre une barre de progression en plus je suppose?

Ya pas de barre de progression, moi j'utilise cette technique pour précharger les images on hover des mes boutons, pour pas que ces images se chargent au moment ou on passe la souris devant un bouton par exemple, mais je ne sait pas si c'est une methode des plus propres



Merci mamat pour le script, j'aimerai savoir si c'est possible d'utiliser un fade in qui concerne toutes les images (<img> uniquement et pas celle définies en bg) d'un site, de maniere a toutes les afficher en fade in mais pas simultanément, sur Google je n'ai trouvé que des fade in concernant une seule image, et si on l'applique sur plusieurs images différentes sur la meme page, celle ci apparraissent en même temps...
J'aimerai que les images soit chargées une apres l'autre et donc affichée en fade in une apres l'autre, c'est peut être lourd en javascript de faire ?
Peu-etre avec une boucle qui fade in l'image si image.complete=true et qui cache l'image si = false ?
Modifié par Dynexd (31 Jan 2007 - 12:04)

Dynexd a écrit :
En fait tu souhaites préloader tout ton site ??

En fait oui pourquoi mais en restant "standard" ou au moins les images les plus lourdes si t'as une soluce / doc ca m'interesse pour le chargement du site

Salut,

Une petite mise en garde par rapport au préchargement...

Imagine que tu aies une connection bas-débit... Pour charger une image, il faudrait peut-être 15sec... (ou plus) Si je passe mes cinquantes images en préchargement, combien de temps crois-tu résister avant de quitter le site ou avorter le préchargement en changeant de page ?

Même si tu améliores la rapidité de navigation par la suite, il faut bien te dire que peu de monde va être là pour le voir...

Une alternative est alors de laisser le site se charger normalement, de le rendre pleinement fonctionnel puis, seulement après, d'ajouter une couche Ajax qui ne charge que le strict nécessaire.

C'est ce qui me semble être la meilleure méthode pour rendre service au maximum de visiteurs... en particulier à ceux qui en ont le plus besoin.

MOui enfin dans tout les cas, le mec en 56k il attend autant de temps au final.

Et puis on peut toujours faire un link bas débit ou on fait un joli design css avec le minimum d'images.

Dans ce cas on peut alors mettre un joli preloader pour les haut débit et alors... C'est quoi le mieux??? lol

JE viens d'apprendre CSS+XHTML je me sens pas chaud tout de suite pour me mettre à AJAX

a écrit :
pour des images de contenu, il est inutile si ce contenu est correctement architecturé

Le seul cas (pour l'instant) dans lequel j'ai utilisé ce script c'est pour une gallerie d'images. voilà la raison:
Les images sont relativement lourdes (entre 30 et 60 k, c'est pour un photographe, d'ou la qualité et la taille). Sans ce script quand on clique sur l'image, pendant le temps de chargement de celle ci la précedente reste en place, ce que je trouve déconcertant pour l'utilisateur qui ne voit pas de conséquence immédiate a son action.

a écrit :
Bref, du bricolage sans grand intérêt.

Tout a fait d'accord si c'est pendant le chargement naturel de la page (de toute façon il ya la bare d'avancement du navigateur ). Apés si c'est pour des appels de contenus lourds une fois la page chargée (Ajax ou images, ou les deux) là c'est indispensable.

Ouahhhh une réponse de Mosssssieur laurent dennis Honoré

L'interet dans mon cas est purement esthétique, je veux tout simplement que m'a page s'affiche d'un coup et non pas morceaux par morceaux.

http://qa.nikolours.com/clean (apres avoir cliqué sur le lien)

Alors je pourrais faire un preload lambda sans page de transition mais dans l'interet esthétique du site j'aimerai bien passé par une page intermediaire avec barre de progression.

Le seul truc qui me chagrine c'est est ce que cette potentielle page pourrait nuire a l'accessibilité du site (j'ai fait de mon mieux si y a des trucs a retouché chui preneur mais je dois garder le coté esthétique)...

Et je rejoins matmat pour la gallerie tof pour le coté esthétique

Laurent Denis a écrit :


Pensez, en outre, svp, à décliner les images "plein format" en au moins 2 poids/qualité au choix de l'utilisateur. Et laissez-le s'assumer.

/me ne comprendra jamais cette rage de dépenser des ressources inutilement là où on peut laisser l'internaute faire ses choix tout seul...

Dans ce cas ne vaut il mieux pas proposer à l'utilisateur une version allégée en image du site d'entrée de jeu?