Afficher une animation d'attente au chargement de la page

**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

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.

Afficher une animation d'attente au chargement de la page

jQuery

Vue hybride

Discussions similaires

Partager

Partager