28221 sujets

CSS et mise en forme, CSS3

[Résolu] Faire un préchargement (preload) sans javascript

Salut à tous !
Petite question par rapport au tutoriel :

Pourquoi charger les images en début de code ? Cela ne ralenti pas l'affichage du reste de la page (quel tag a priorité lors du download du code ?) ? Intuitivement Smiley fou , j'aurais plutôt positionné les images juste avant </body>.

Un avis ? Une justification ? (je n'ai pas testé avec beaucoup d'images)

D'avance merci !
Modifié par g41687 (29 Jul 2005 - 12:41)
Salut bienvenue à toi !!

1ere chose, si tu met les images à précharger juste avant le </body> en fait tous les styles (et donc images) relatifs aux éléments avant (donc TOUT) seront chargé et au final ton preload n'aura rien preloadé du tout ;)
2eme chose, oui bien sûr un preload ralenti l'affichage de la page mais n'importe quel preload en fait, on choisi de précharger des éléments avant d'autre donc on ralenti le reste !

3eme chose, je pense que ce tuto fait parti des vieux "machins" de Raphaël, parceque bien que l'idée soit intéressante, c'est quand même un rajout de code un peu (bcp) inutile et donc pas très conseillé. En plus avec les mises en pages grâce aux CSS les preloader ne sont plus vraiment necessaire ;) en utilisant les roll over avec image unique ca roule tout seul !
Modifié le 09 Nov 2004 - 20:12
g41687 a écrit :
...j'aurais plutôt positionné les images juste avant </body>.

D'avance merci !


Tutoriel a écrit :

Pratique pour, sur une page d'accueil, charger les images qui s'afficheront sur le reste du site...


Ou sur cette même page d'accueil ?
Un exemple de preload avec CSS que j'utilise sur mon site :


#header h1 { 
   background: transparent url("images/mdchover.gif"); /* preload image */
   width: 700px; 
   height: 72px; 
   padding: 0; 
   margin: 0; 
}

#header a { 
   display: block; 
   background: transparent url("images/mdc.gif") top left no-repeat; 
   width: 700px; 
   height: 72px; 
   padding: 0; 
   margin: 0; 
   text-decoration: none; 
}

#header a:hover { 
   background: transparent url("images/mdchover.gif"); 
}


Fonctionne à merveille ! Smiley cool
Stephan a écrit :
Ou sur cette même page d'accueil ?


Sur les autres pages du site, bien sûr Smiley cligne
Exemple, une page "gallerie photos" ...
g41687 a écrit :


Sur les autres pages du site, bien sûr Smiley cligne
Exemple, une page "gallerie photos" ...


Je disais "Ou sur cette même page d'accueil ?"

Pas "Où" mais "Ou" dans le sens de "Ou bien" !

J'avoue ne pas avoir été très clair ici !
Administrateur
Stephan a écrit :
Un exemple de preload avec CSS que j'utilise sur mon site :


#header h1 { 
   background: transparent url("images/mdchover.gif"); /* preload image */
   width: 700px; 
   height: 72px; 
   padding: 0; 
   margin: 0; 
}

#header a { 
   display: block; 
   background: transparent url("images/mdc.gif") top left no-repeat; 
   width: 700px; 
   height: 72px; 
   padding: 0; 
   margin: 0; 
   text-decoration: none; 
}

#header a:hover { 
   background: transparent url("images/mdchover.gif"); 
}


Fonctionne à merveille ! Smiley cool

Effectivement, c'est le même principe utilisé ici :
http://www.alsacreations.com/articles/imgreactive/ (2è méthode)
Merci à tous pour vos réponses Smiley smile . Je vais voir tout ça ...
Hors les liens que je m'en vais visiter de ce pas, je suppose donc que dans une page d'accueil, un pre-chargement d'images d'une autre page du site est mieux juste avant </body>
(Pour l'exemple cité [changement d'image au passage de la souris] c'est bien ce que j'utilise actuellement)

A bientôt, longue vie au forum, et j'espère pouvoir aider bientôt plus "bleu" que moi Smiley cligne
Administrateur
Au fait, si le sujet est réglé, ne pas oublier de rajouter un [Résolu] en éditant ton titre Smiley cligne
Sujet clos
Aller à