11521 sujets

JavaScript, DOM et API Web HTML5

Ecran de chargement

Bonjour,
J'aurais besoin d'aide pour comprendre la mécanique derrière la réalisation d'un écran de chargement, comme celui de ce (très beau) site : http://www.909c.fr/fr
De mon côté je commence à savoir développer des sites intéressants au niveau des animations et de la qualité esthétique d'ensemble mais fatalement il y a pas mal d'éléments à charger. J'aimerais réussir à faire patienter le visiteur en attendant que le site soit pleinement chargé et prêt à être fluide dans sa navigation.
En prime sur le lien précédent, la progression de la barre de chargement a l'air d'être effectivement raccord avec le chargement effectif des éléments du site.
Un pro du reverse-engineering saurait-il m'aider à comprendre tout ça ? Y a-t-il différentes techniques possibles ? Si oui, lesquelles appliquer en priorité ?
Merci.
Je dirais au pif qu'il passe par un chargement AJAX. L'objet XHR2 permet de connaître la progression.
Il y a d'autres bidouilles si non pour avoir un chargement "normal"...
Merci, je vais regarder l'objet xhr2 de plus près.
Hum, et euh...malgré ta signature, saurais-tu m'indiquer où et comment me renseigner sur les autres bidouilles que tu évoques ?
Je précise que je sais faire un :
<script type="text/javascript">
$(window).load(function() {
	$(".loader").fadeOut("1000");
})
</script>

Je me dis juste qu'il doit y avoir moyen en décembre 2016 de faire quelque chose de plus abouti techniquement. Non ?
Je pense qu'en cherchant sur Google tu n'aurais pas mis plus de 10 secondes à trouver une page intéressante.

Le principe est d'utiliser une variable JS tout au long de ton code HTML et de l'incrémenter à différents endroits.

<!DOCTYPE html> 
<html lang="fr-FR">
	<head>
		<meta charset="utf-8" />
		<title>Titre de la page</title>
	</head>	
	<body>
		<!-- ... -->
		<script>var progess = 0;</script>
		<!-- ... -->
		<script>progess = 10;</script>
		<!-- ... -->
		<script>progess = 30;</script>
		<!-- ... -->
		<script>progess = 60;</script>
		<!-- ... -->
		<script>progess = 100;</script>
	</body>
</html>


Cela dit, c'est de la pure bidouille. La seule façon d'avoir la progression exacte de chargement est de passer par l'objet XHR 2. Après, est-ce une si bonne idée de charger entièrement son site en AJAX...
Bonsoir Mendoza,
pour moi ta référence ressemble à une sonde Pitot gélive d'Airbus, ou à une sonde d'eau vide de Three Mile Island ou de Fukushima : toujours une jolie catastrophe !

Quant à un effet de parallax ...

Si tu souhaitais du vrai preload, tu verrais par exemple ceci :
http://sentrais.eu/diaporama_v-8/diaporama-8.htm
Modifié par pictural (10 Dec 2016 - 23:08)
Ok. Merci à tous les deux pour vos avis. Vu la profusion de techniques différentes pour créer des sites je me disais qu'il y avait quelque chose de plus complet à découvrir. Je garde en tête la bidouille proposée par Zelalsan, on ne sait jamais.
Et oui, Pictural, je suis d'accord, le parallax a rarement d'intérêt, même esthétique. En plus le scroll rame la plupart du temps, ce qui ruine tout l'effet recherché.
Sujet clos
Aller à