Gestion bouton de chargement

**Khleo** · 13/01/2011, 16h37

Bonjour,

Je souhaiterais afficher un bouton de chargement pendant qu'une fonction ajax s'éxécute :

Code :

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

<div id="charge" style="visibility:hidden;">Chargement en cours</div>

Code :

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

1
2
3
4
5
6
7
function Verif ()
{
	$.colorbox({href:"ajax/verif.php"});
	//-
	$('#charge').ajaxStart(function(request, settings) { $(this).css("visibility", "visible") });
	$('#charge').ajaxStop(function(request, settings) { $(this).css("visibility", "hidden") });
}

L’exécution prend 2 ou 3 secondes et j'aimerai que la div "Charge" s'affiche pendant le chargement.

Merci

**thunder75** · 13/01/2011, 21h16

Avec ce code ca fonctionne.

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
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
 $('#ajaxBusy').ajaxStart(function(){
  $(this).show();
 }).ajaxStop(function(){
  $(this).hide();
 });
});
</script>
</head>
<body>
<div id="ajaxBusy" style="display:none"><p><img src="ajax-loading.gif"></p></div>
</body>
</html>

**Khleo** · 14/01/2011, 14h58

Ok merci,

En faite il ne fallait pas mettre les AjaxStart et AjaxStop dans la fonction.

Cependant, ça fonctionne sous Opera et Firefox mais pas sous Safari, IE et Chome, ce problème est-il connu ?

Merci

**scourjean** · 14/01/2011, 15h19

Et si tu utilises les paramètres de colorbox ça ne serait pas mieux:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
	$.colorbox({
		href:"ajax/verif.php",
		onOpen: function(){
			$('#ajaxBusy').show();
		},
		onComplete: function(){
			$('#ajaxBusy').hide();
		}
	});
});

**Khleo** · 14/01/2011, 15h29

Envoyé par scourjean

Et si tu utilises les paramètres de colorbox ça ne serait pas mieux:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
	$.colorbox({
		href:"ajax/verif.php",
		onOpen: function(){
			$('#ajaxBusy').show();
		},
		onComplete: function(){
			$('#ajaxBusy').hide();
		}
	});
});

Merci, mais toujours pareil, ça fonctionne sous Firefox mais pas sous Chrome.

Sous Chrome, IE et Safari il y a une sensation de "Freeze" de la page très désagréable.

J'ai un peu modifié mon code :

Code :

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

1
2
3
4
5
6
7
8
function Verif ()
{
	$.ajax({
		type: 'GET',
		url: 'ajax/verif.php', 
		async: false
	});
}

Code :

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

1
2
3
4
$(function(){
	$('#charge').ajaxStart(function() { $(this).show(); });
	$('#charge').ajaxStop(function() { $(this).hide(); });
});

Ce qui est bizarre, c'est que l'image loading ne s'affiche pas lors du 1er chargement, mais lorsque que je reclic sur le bouton une fois le 1er chargement passé, l'image s'affiche bien.

Merci

**Khleo** · 14/01/2011, 16h01

Le problème viendrait de :

Code :

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

async: false

Car quand celui ci est retiré, le bouton loading apparaît bien.

async (booléen): par défault, toutes les requêtes sont asynchrones (ce paramètres vaut true par défaut). Si vous avez besoin de requêtes synchrones, passez cette fonction à false. A noter que les requêtes synchrones bloque temporairement le naviguateur de l'utilisateur tant que la requête n'est pas terminée.

http://jquery.developpeur-web2.com/d...jax/$.ajax.php

Le problème viendrait-il de là ?

Merci

Gestion bouton de chargement

jQuery

Vue hybride

Discussions similaires

Partager

Partager