jquery ajax chargement gif

Question

Comment ajouter un gif de chargement pendant le traitement jQuery AJAX? J'ai lu quelques tutoriels, ils utilisent beforeSend. mais toujours pas voir la chose de chargement.

<script src="jquery-1.6.1.min.js"></script> 
<script> 
$.ajax({ 
url: "index_2.php", 
dataType: "html", 
type: 'POST', 
data: "value=something", 
beforeSend: function() { 
    $("#result").html('<img src="loding.gif" /> Now loding...'); 
}, 
success: function(data){ 
    $("#result").html(data); //even add .delay(5000) 
} 
}); 
</script> 
<div id="result"></div> 

index_2.php

<?php 
sleep(5); 
echo $_POST['value']; 
?> 

Je mis sleep(5); dans index_2.php, il doit montrer l'londing.gif dans les div#result pendant 5 secondes, jusqu'à ce que le retour de données de index_2.php.

Answer 1

peut-être une idée est avant d'appeler la demande ajax charge l'image comme vous avez fait à savoir

$("#result").html('<img src="loding.gif" /> Now loding...'); 

onsuccess puis lier les données

Answer 2

Jetez un oeil à la fonction $.ajaxStart(), qui exécutera chaque fois que La requête Ajax est démarrée (évidemment).

Vérifiez this question pour plus de détails.

Answer 3

Il y a plusieurs façons. Mon moyen préféré est d'attacher une fonction aux événements ajaxStart/Stop sur l'élément lui-même.

$('#loadingDiv') 
    .hide() // hide it initially 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    }) 
; 

Les fonctions ajaxStart/Stop se déclenchent lorsque vous effectuez des appels ajax.