barre d'état = "terminé" -> des images ne s'aff

**bellebiquette** · 05/03/2006, 19h56

Bonjour à tous
Je suis à la recherche d'un avis éclairé

Je viens de créer un menu-images c'est à dire une image que j'ai découpé en plusieurs parties et chaque parties changent lors d'un mouseover.

Le problème que je rencontre est que, de manière aléatoire, certaines images ou parties de l'image ne s'affichent pas alors que la barre d'état du navigateur m'indique que le chargement de la page est terminé.

Ce problème est identique sous FF et IE.

Par ailleurs ce problème apparaît également quand je souhaite afficher une grande série de photos miniatures dans la même page.

Comment puis-je procéder pour garantir à 100% le chargement des images avant que l'utilisateur puisse accéder à ma page (la fonction de préchargement ne change rien au problème)

:

s'agit t'il d'un problème de temps de réponse du serveur

:
Merci

**Linaa** · 05/03/2006, 20h53

C'est surement dû à la taille et/ou au poids de tes images.

Mais quand l'utilisateur revisitera le site, les images seront mises en cache.
Et donc les autres fois, les images s'afficheront surement et plus rapidement (sauf si l'utilisateur a vidé le cache!).

**bellebiquette** · 05/03/2006, 23h09

effectivement c'est dû à la taille ou au nombre d'images à télécharger. Mais existe-t-il un moyen pour forcer le navigateur à ne pas afficher la page tant que tout n'est pas correctement chargé ?
Peu-on insérer une boucle de test qui vérifie que tout est affiché et si le test n'est pas concluant, faire un rafraichissement automatique de la page ?

**Linaa** · 06/03/2006, 13h53

Non, il n'y a pas moyen de le faire, puisque cela depend du navigateur!

Par contre, pour une grande image, tu peux la decouper en plusieurs parties, puis les afficher.
Ainsi, tu seras presque certaine que l'image sera affichée.
Pour le format de l'image, tu peux également, si ce n'est pas dejà le cas, le jpg ou le gif qui sont generalement de faible poids.

**SpaceFrog** · 06/03/2006, 14h07

heu desolé de te contredir linaa mais tu peux toujours mettre le body en visibility hidden ou display none tant que les images ne sont pas complete et faire également un preload des images, il y a eu un post là dessus la semaine dernière ...

**Linaa** · 06/03/2006, 14h26

Ah bon, mais comment on fait pour savoir si les images sont chargées ?

**SpaceFrog** · 06/03/2006, 14h36

avec un petit javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function testLoaded(){
tabPics=document.images
TotPics=tabPics.length
LoadedPics=0
for(i=0;i<TotPics;i++){LoadedPics+=tabPics[i].complete?1:0;}
if (LoadedPics==TotPics){alert('fini');}
}
</script>

il suffit ensuite de lancer cette focntion dans un setInterval pour tester de façon ittérative si toutes les images sont chargées ou pas ...

**bellebiquette** · 06/03/2006, 17h53

Salut,
j'ai pas trouvé le post traitant du sujet...
Par contre, ce petit javascript m'intéresse fortement, peux-tu m'expliquer plus en détail la marche à suivre pour s'en servir.
Je copie tel quel ce bout de programme entre les balises <HEAD> de mon code et ensuite ?
Il suffit simplement de mettre visibility: hidden dans la balise body et c'est tout ?

**SpaceFrog** · 07/03/2006, 08h54

heu non cette fonction vérifie à un instant t l'état de chargement des images ...
il faut donc créer une focntion qui lance la fonction de vérification à intervalles réguliers ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
var Timer
function testLoaded(){
tabPics=document.images
TotPics=tabPics.length
LoadedPics=0
for(i=0;i<TotPics;i++){LoadedPics+=tabPics[i].complete?1:0;}
if (LoadedPics==TotPics){clearInterval(Timer);
                                     alert('fini');}
}
 
 
function BoucleTest(){
Timer=setInterval(function(){testLoaded()},100)
}
</script>

et lancer l'itteration dans le onload du body...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="BoucleTest()">

**Linaa** · 07/03/2006, 11h36

Mais si l'image existe, mais que le navigateur a du mal à charger (trop d'image) et que le texte alternatif apparait à la place, ça ne fonctionnera pas ?
Et la boucle serait infinie ?

**SpaceFrog** · 08/03/2006, 09h22

faut juste placer un limitateur de temps si c'est trop long tu mets une image par défaut preloadée et tu affiches la page ...

barre d'état = "terminé" -> des images ne s'aff

HTML

Vue hybride

Partager

Partager