Sur beaucoup de sites, on retrouve des petits gif d’animation d’attente de chargement, invention purement visuelle pour rassurer le visiteur sur le fait qu’une action est en train de charger.
Voici un rapide snippet réalisé avec jQuery pour reproduire ce comportement. D’ailleurs, on créera facilement son icone grâce à ajaxload.
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#button').submit(function() {
$('#load').show();
$('#result').load('test.php', function() {
$('#load').hide();
});
return false;
});
});
</script>
</head>
<body>
<div id="result"></div>
<form id="button">
<input type="submit" value="Refresh date" />
</form>
<div id="load" style="display: none;">
Loading <img src="loader.gif" />
</div>
</body>
</html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#button').submit(function() {
$('#load').show();
$('#result').load('test.php', function() {
$('#load').hide();
});
return false;
});
});
</script>
</head>
<body>
<div id="result"></div>
<form id="button">
<input type="submit" value="Refresh date" />
</form>
<div id="load" style="display: none;">
Loading <img src="loader.gif" />
</div>
</body>
</html>
Avec le petit script tout bête à coté test.php:
<?php sleep(2); echo time(); ?>
Comment ça marche ?
C’est très simple: Lors de la soumission du formulaire ‘button‘, la fonction associée définie grâce à jQuery va faire apparaitre le div ‘load‘, lancera le chargement de test.php et à la fin de son chargement, fera tout simplement redisparaitre le div ‘load‘.