Afficher une animation d'attente au chargement de la page [Résolu]

noobyyy · 14/05/2011, 17h14

bonsoir j'aimerai afficher sur une page en php un listing d'un grands nombre de ligne. "en gros : pas mal de contenu".

Comment faire pour afficher une présentation d'attente en utilisant Jquery ?

du genre : Veuillez patientez... loading.gif (mais on ne voit pas le contenu tant que la page n'est pas chargé.

Merci

Fluid-Val · 15/05/2011, 21h06

Rapidement, je dirais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
	<head>
		<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	</head>
 
	<body>
		<!-- Ton gif -->
		<div id="load-page">Waiting...</div>
 
		<div id="body">
			<!-- Toutes tes lignes -->
			...
		</div>
 
		<script>
			$(function()
			{
				// Fonction appelée au chargement de tous tes éléments
				$("#load-page").hide();
			});
		</script>
	</body>
</html>

Toutefois, cette solution peut s'avérer problématique et plutot lourde. Le gif peut ne pas s'afficher ou ne pas s'animer.

Je te conseillerais donc de procéder en deux étapes :

1- Chargement de la page sans toutes tes lignes mais avec le gif d'attente.

2- Appeler en AJAX tout le contenu de ta page puis cacher ton gif.

Bovino · 17/05/2011, 14h03

La première question à se poser est : pourquoi vouloir utiliser jQuery. Si c'est juste pour cette fonctionnalité, ça me semble tout à fait inutile puisque ça peut se faire en quelques lignes...
Sinon, le principe proposé par Fluid-Val est le bon : afficher le gif au chargement avec un masque d'opacité et cacher le reste du contenu, puis, lorsque la page est chargée, supprimer (ou masquer) le gif et afficher le reste.

Ce qui amène à la seconde question importante : si l'utilisateur ne dispose pas de JavaScript, il se passe quoi ?

noobyyy · 17/05/2011, 14h41

@Fluid-Val

Merci pour ta réponse et ta rapidité.

@Bovino

Pourquoi utiliser Jquery ?
Euh... dans ma page j'ai inclus le framework Jquery et je me suis dit pourquoi ne pas l'utiliser ? est-il préférable d'utiliser le javascript au lieu de Jquery ?

si l'utilisateur ne dispose pas de JavaScript, il se passe quoi ?
C'est un espace privée donc ce problème ne se pose pas.
De plus, si je veux faire ceci le JS est indispensable non ?
Que je sache le JS n'est pas remplaçable si les gens ne veulent pas l'activer c'est leur problème. Le web 1.0 est dépassé voir même le web 2.0... si les utilisateurs suivent pas le progrès, le web avancera jamais.

en tout cas merci Bovino pour la confirmation du poste de Fluid-Val, je vais testé ceci dès que possible.

Bovino · 17/05/2011, 15h02

Citation:

Envoyé par noobyyy

Pourquoi utiliser Jquery ?
Euh... dans ma page j'ai inclus le framework Jquery et je me suis dit pourquoi ne pas l'utiliser ? est-il préférable d'utiliser le javascript au lieu de Jquery ?

Effectivement, si tu utilises déjà jQuery, autant s'en servir. Je posais la question car on a souvent le cas de personnes qui utilisent jQuery uniquement pour ce genre d'utilisation.

14/05/2011, 17h14	#1
noobyyy Débutant Inscription : février 2009 Messages : 559 Détails du profil Informations forums : Inscription : février 2009 Messages : 559 Points : 138 Points : 138	Afficher une animation d'attente au chargement de la page bonsoir j'aimerai afficher sur une page en php un listing d'un grands nombre de ligne. "en gros : pas mal de contenu". Comment faire pour afficher une présentation d'attente en utilisant Jquery ? du genre : Veuillez patientez... loading.gif (mais on ne voit pas le contenu tant que la page n'est pas chargé. Merci
	00

17/05/2011, 14h03	#3
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 806 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 806 Points : 35 802 Points : 35 802	La première question à se poser est : pourquoi vouloir utiliser jQuery. Si c'est juste pour cette fonctionnalité, ça me semble tout à fait inutile puisque ça peut se faire en quelques lignes... Sinon, le principe proposé par Fluid-Val est le bon : afficher le gif au chargement avec un masque d'opacité et cacher le reste du contenu, puis, lorsque la page est chargée, supprimer (ou masquer) le gif et afficher le reste. Ce qui amène à la seconde question importante : si l'utilisateur ne dispose pas de JavaScript, il se passe quoi ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

17/05/2011, 14h41	#4
noobyyy Débutant Inscription : février 2009 Messages : 559 Détails du profil Informations forums : Inscription : février 2009 Messages : 559 Points : 138 Points : 138	@Fluid-Val Merci pour ta réponse et ta rapidité. @Bovino Pourquoi utiliser Jquery ? Euh... dans ma page j'ai inclus le framework Jquery et je me suis dit pourquoi ne pas l'utiliser ? est-il préférable d'utiliser le javascript au lieu de Jquery ? si l'utilisateur ne dispose pas de JavaScript, il se passe quoi ? C'est un espace privée donc ce problème ne se pose pas. De plus, si je veux faire ceci le JS est indispensable non ? Que je sache le JS n'est pas remplaçable si les gens ne veulent pas l'activer c'est leur problème. Le web 1.0 est dépassé voir même le web 2.0... si les utilisateurs suivent pas le progrès, le web avancera jamais. en tout cas merci Bovino pour la confirmation du poste de Fluid-Val, je vais testé ceci dès que possible.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email