Ecouter le chargement entier du site

Bonjour a tous,

Je m'essaye à l'ajax, et j'avais une petite question. Comment preloder un site et le lancer une fois que le contenu est chargé.
J'ai commencé a faire mon site avec un effet slide vertical (genre : http://herohousing.org/UBBT/).
Donc toutes les images et le contenu texte est dans ma page index. Le souci c'est que c'est super long a chargé. Mes images de fond arrive après.

Auriez vous une solution ?
Merci d'avance.

PS: le référencement sur ce type de site est il possible ?

Salut,

Par "Ecouter le chargement entier du site", je suppose que tu voulais dire "écourter" ? Ca m'a fait sourire de bon matin, car je m'imaginais l'oreille collée contre mon écran en train de charger mes sites favoris !

Précharger les éléments d'un site peut être une bonne chose, mais il vaut mieux l'afficher au fur et à mesure, surtout si c'est long, pour ne pas agacer le visiteur. Si rien ne s'affiche pendant plusieurs secondes, il risque de penser que tout le site va se charger aussi lentement, et va certainement passer son chemin très rapidement. Alors qu'il saura patienter s'il voit que des choses s'affichent et qu'il a un peu à manger.

La seule chose pour écourter le chargement, c'est de faire de l'optimisation, par exemple limiter le nombre d'images et les compresser au maximum, diminuer le nombre de requêtes au serveur, etc.

Pour le référencement, vu qu'il s'agit d'un site sur une seule page, le contenu entier de la page sera pris en compte par les moteurs pour peu qu'il leur soit accessible. Après je ne suis pas spécialiste du référencement, mais il me semble que tu obtiendrais peut être un meilleur résultat pour le positionnement en ayant plusieurs pages liées entre elles plutôt qu'une seule page.

En plus des conseils de Mikachu, j'ajouterai que tu peux charger ta page avec un contenu «de base» (tout en ayant optimisé tout ce qui est poids des images, réduction du nombre de fichiers de JS et CSS appelés...). Ensuite, une fois ta page complètement chargée (évènement "load" de l'élément body), tu peux lancer une fonction JS qui va précharger d'autres ressources que tu comptes utiliser.

Je ne peux pas détailler la technique car il y a plusieurs approches possibles, avec des qualités et défauts différents. Mais le principe est de ne charger que le strict nécessaire dans un premier temps (dont le CSS, qui est nécessaire pour afficher la page), puis dans un deuxième temps de charger d'autres ressources.

Salut,
J'avais mis écouter, parce que c'est le terme que j'emploie en AS3. Passons.
Pour répondre a Florent, j'ai qu'un seul script JS et une seule CSS. Le souci c'est c'est que j'ai 8 div avec une image (200ko) en background qui slide au clic sur mon menu.

ex : http://herohousing.org/UBBT/

Le contenu apparait directement et l'image background ensuite. J'aimerais que le background apparaisse avant le contenu. J'ai l'impression que ca charge mes 8 images en meme tps, est ce cela ?.
J'en demande peut etre trop, sorry

je ne pense pas que tu puisses changer l'ordre dans lequel le browser télécharge les images, d'autant que ça doit varier en fonction des browsers. Tous doivent au moins s'entendre sur une chose : les images de background sont téléchargées après les images inline, le JS et le CSS

je pense que ça sera + pénible qu'autre chose pour ton visiteur de retarder la visualisation de ta page juste pour montrer ton image de fond, mais sinon la technique de base est la suivante :

- si tu as une div qui entoure tout ton contenu, met une classe .hidden dessus (ça doit marcher aussi avec le body je pense)
- écoute l'event document.onload, qui ne s'exécute que lorsque TOUS les fichiers de la page ont été téléchargés
- à ce moment là, tu enlèves la classe .hidden de ta div/body, tout apparait d'un coup

si tu veux faire une transition pour révéler le contenu, il faut par exemple mettre une div (avec un loading par exemple) devant tout le reste puis la faire disparaitre en fading ou autre (il y a des librairies JS pour animer ça)