11496 sujets

JavaScript, DOM et API Web HTML5

Diaporama avec trop d`images dans le body ralentit le chargement

Bonjour à tous,

je débute complétement et en suivant les cours et les tutos, je me suis lancée dans la création de mon premier site internet.
Le HTML et le CSS c`est pas pire mais pour le reste, c`est du chinois pour l`instant.

Alors voila un de mes gros problèmes: ma page HTML a une photo en background dans le header et en arrière plan de la page aussi (url des images dans le css).
Mais dans le body j`ai mis un diaporama, donc une liste de nombreuses images.
La page en question: http://www.rouleurdesbois.com/activitesnautiques.htm

Le problème: les images background apparaissent seulement après le chargement des photos du diaporama et c`est pas super joli.
Mais la, franchement, je suis un peu désespérée, alors s`il y a une ou des âmes charitables ...

Merci d`avance !!!
Salut,

Je pense que tu dois faire charger ton script de slider en dernier. Soit par une fonction d'async ou alors en plaçant le script en fin code html (juste avant la fermeture de ton body)

Également, mettre width et height dans tes balises img ça évite au navigateur de calculer la taille de l'image ce qui rend le chargement plus rapide (et c'est une bonne pratique).

Je vois que tu utilises une source externe pour jquery, tu devrais le charger sur ton ftp et l'appeler depuis l'url du dossier car si jquery est inaccessible depuis sa source, même 10 minutes, cela peut faire planter le chargement des éléments qui ont besoin de celui ci.

Bon courage!
Salut SuperMerguez et merci

effectivement, je l`avais fait pour une autre page d`activité et j`avais oublié de refaire celle-la.
Mais cela ne change rien à mon problème car le navigateur charge d`abord les images rencontrées dans le html puis ensuite celles du css.
On le voit dans le waterfall fait avec GTMetrix par exemple:
upload/43372-waterfall.jpg

Ce qui a l`air d`être son comportement normal mais du coup avec toutes ces images dans le html le header et l`arrière plan apparaissent en dernier et c`est moche
bonsoir,

essaies éventuellement de mettre le style (l'image background du body) directement dans le html, ce sera peut-être interprété avant que le css ne le soit.

autre soucis, tu n'a pas réglé de cache (par exemple via le fichier .htaccess), la mise en cache permettrait (lors d'une seconde visite) de ne plus aller charger les images sur le serveur.
Modifié par Zebrou (16 Apr 2014 - 22:59)
Salut Zebrou,

oui le fichier .htaccess est prêt mais je voulais finaliser les modifs avant.

J`ai essayé de mettre le style directement dans le html:
<body style="background: url(images/fondquad_3.jpg) no-repeat center fixed; background-size:cover">


mais ca n`a aucun effet, le background apparait toujours après le chargement des images du diaporama ...
Sujet clos
Aller à