11548 sujets

JavaScript, DOM et API Web HTML5

Préchargement images

<body onload="javascript:verifier();">
<div id="page" style="visibility:hidden;">
<img src="pixel.gif" border="0" width="1" height="1">

<SCRIPT type="text/javascript"> function verifier() { if(document.getElementsByTagName('img')[0].complete) { if (document.getElementById('page')) { document.getElementById('page').style.visibility='visible'; } } else { } } verifier(); </script>

Contenu de la page, images...

</div>


Bon c'est pas génial, mais le résultat est que la page ne s'affiche que quand les images sont chargées (en évitant un script classique de préchargement d'images) ; j'ai ajoûté un test utilisant des variables de session php pour éviter que le code quand les images sont en cache. Ca fonctione avec IE7 et Firefox 2, des commentaires sur ce truc simplet ? Smiley cligne
Perso j'aime bien pouvoir commencer à lire le texte avant d'avoir toutes les images, mais je suis peut-être un peu pressé, ou alors j'ai une connection pas trés rapide...

Et au fait ça marche si tu desactives les images?
Smiley cligne oui je comprends les gens pressés ! on peut faire dans le même genre en attribuant aux images un "display:none" ; puis une boucle qui remplace "none" par "block", le texte apparaît puis d'un coup les images...

<img src="image0.gif" id="vignette1">
<img src="image1.gif" id="vignette2">
<img src="image2.gif" id="vignette3">

avec

function montre(id) {
for (var i = 1; i<=$compteur; i++) {
if (document.getElementById('vignette'+i)) {
document.getElementById('vignette'+i).style.display='block';
}
}
}
Comme matmat, je zappe si j'arrive sur une page blanche. Le html est pourtant bien fait, du moment que tu précises les dimensions des images, même en bas débit, tu peux lire le texte pendant que les images se chargent.
P.S. : pense à utiliser le bouton code pour encadrer ton code
Modifié par chmel (28 Jun 2007 - 19:50)


<?php
session_start(); // démarre la session
?>

<html>
<head>

<!-- Préchargement des petites images de fond, logo, picto ect... --> 
<SCRIPT LANGUAGE="JavaScript"> 
var imgs = new Array("logo.gif","picto.gif"); 
for ( var loop = 0 ; loop < imgs.length ; loop++ ) { var tmp = imgs[ loop ]; (imgs[ loop ] = new Image()).src = tmp; } 
</script>

<!-- Fonction qui montre les images (variable php pour le nbr des images par exemple) ... -->
<SCRIPT LANGUAGE="JavaScript"> 
function montre(id) { for (var i = 1; i<=<?php echo"$nbrimage"; ?>; i++) if (document.getElementById('vignette'+i)) { document.getElementById('vignette'+i).style.display='block'; } } } 
</script>

</head>

<!-- ne vérifie que si la session est neuve -->
<?php
if ( isset( $_SESSION['hitsbody'] ) ) {
echo'<body topmargin="0" leftmargin="0">'; } else { 
$_SESSION['hitsbody'] = '1'; 
echo'<body topmargin="0" leftmargin="0" onload="javascript:verifier();">'; }
?>

<img src="pixel.gif" border="0" width="1" height="1"><a name="top"></a>


<!-- si la session est nouvelle, vérifiera le chargement complet des images... -->
<?php
if ( isset( $_SESSION['hitsscript'] ) ) {
} else {
echo"<SCRIPT LANGUAGE=\"JavaScript\"> function verifier() { if(document.getElementsByTagName('img')[0].complete) { montre('id'); } } </script>
";
}
?>

<!-- partie où se trouvent les images -->
<?php
if ( isset( $_SESSION['hitsscript'] ) ) { $disp="block"; } else { $disp="none"; }

echo'
<div style="border-style:solid; border-width:1px; border-color:#FF7416; background-color:#D6D6D6; height:50px; width:80px; display:block">

<img src="image1.gif" style="display:'.$disp; echo' id="vignette1" border="0" alt="">

</div>';

<div style="border-style:solid; border-width:1px; border-color:#FF7416; background-color:#D6D6D6; height:50px; width:80px; display:block">

<img src="image2.gif" style="display:'.$disp; echo' id="vignette2" border="0" alt="">

</div>';

$_SESSION['hitsscript'] = '1';
?>
<!-- etc... ou faire une boucle si les images sortent d'une requête SQL -->


Merci de vos commentaires.

C'est vrai que la page blanche ce n'est pas ce qu'il y a de mieux, en fait avec le code ci-dessus, la page s'affiche normalement sans temps d'attente (textes et images non retardées) ; les images sélectionnées ne s'affichent elles qu'une fois chargées (ça ne ralentit pas quoi Smiley cligne

Pour éviter que le script fonctionne une fois les images en cache, il ne s'éxécute que si la session est nouvelle.

A quoi ça sert ? simplement à ce que le images s'affichent d'un coup Smiley cligne et non pas de façon "chronologique".

Par contre, en cas de rechargement de la page dans la même session evidemment ça ne marche pas.

Y-a-t-il un moyen de savoir si le navigateur vient de recharger la page ?

Merci Smiley cligne
Modérateur
Salut, Smiley smile

Le préchargement d'images est à éviter essentiellement pour les connections "petit débit".

Si tu veux quelquechose d'agréable, le mieux, c'est de passer par Ajax afin de conserver une application fonctionnelle dès les premiers instants.

A titre d'exemple, tu peux afficher la page blanche (ou presque) au départ et charger les images par paliers. Une fois chargées, tu leur mets un filtre de manière à les rendre transparentes puis tu les fais apparaitre progressivement.

Ce serait beaucoup plus esthétique et surtout, bien plus accessible. Smiley cligne
Modifié par koala64 (02 Jul 2007 - 14:10)
Salut,

chrismontpellier a écrit :
des commentaires sur ce truc simplet ?


Oui, ce serait bien de lire bonjour et merci avant toute autre considération Smiley cligne

PS :

Ton adresse de site, celle qui se retrouve en lien sur le bouton www est mal renseignée. Tu n'es pas le premier ça arrive assez souvent Smiley smile
de mon coté j'ai un problème similaire mais il semble moins complexe

Sur cette page : http://toutenkamion.net/statique/trajets-et-cartes.html

J'ai trois cartes qui s'affiche en fonction des puces choisie. Tout fonctionne mais avant de partir vers une mauvaise solution de préchargement voici mes pistes :
- Placer dans le code xhtml les images et les masquer mais elles seront lisible par les lecteurs d'écran (mieux vaut éviter).
- Utiliser un préchargement javascript inspiré de cette page : http://www.editeurjavascript.com/scripts/scripts_images_2_2.php sans l'avoir tester je me demande si ça fonctionne réellement.
- Modifier les images pour qu'elles s'affichent progressivement, c'est pour l'instant la solution retenue.

Qu'en pensez vous? Si vous pouvez m'aider à trancher.
Modifié par percherie (02 Apr 2009 - 10:10)
Perso je fais mon préchargement d'image en CSS dans une classe cachée ou je met des background-image.

Je peux alors appeller les images sans chargement. Je trouve que ca marche pas mal. Après ... Est-ce accèssible ... est-ce valide ? Je ne sais pas je ne valide pas encore mes feuilles CSS.

Rude
Sujet clos
Aller à