Afficher l'image de chargement pendant la publication avec ajax

Question

Je sais qu'il existe des milliers d'exemples sur Internet, mais je veux pour le script que je dois déjà afficher une image gif de chargement pendant que les données sont récupérées. Ma connaissance de java sont pauvres, donc je demande comment changer les éléments suivants:

<script type="text/javascript"> 
$(document).ready(function(){ 
    function getData(p){ 
    var page=p; 
    $.ajax({ 
     url: "loadData.php?id=<? echo $id; ?>", 
     type: "POST", 
     cache: false, 
     data: "&page="+ page, 
     success : function(html){ 
      $(".content").html(html); 
     } 
    }); 
} 
getData(1); 

$(".page").live("click", function(){ 
    var id = $(this).attr("class"); 
    getData(id.substr(8)); 
     }); 
     }); 
    </script> 

Et mon div est ici:

<div class="content" id="data"></div> 

Merci. John

Answer 1

Disons que vous avez un endroit de balise sur la page qui contient votre message de chargement:

<div id='loadingmessage' style='display:none'> 
    <img src='loadinggraphic.gif'/> 
</div> 

Vous pouvez ajouter deux lignes à votre appel ajax:

function getData(p){ 
    var page=p; 
    $('#loadingmessage').show(); // show the loading message. 
    $.ajax({ 
     url: "loadData.php?id=<? echo $id; ?>", 
     type: "POST", 
     cache: false, 
     data: "&page="+ page, 
     success : function(html){ 
      $(".content").html(html); 
      $('#loadingmessage').hide(); // hide the loading message 
     } 
    }); 

Answer 2

Jetez un oeil à ajaxStart et ajaxStop

Answer 3

$.ajax(
{ 
    type: 'post', 
    url: 'mail.php', 
    data: form.serialize(), 
    beforeSend: function() 
    { 
     $('.content').html('loading...'); 
    }, 
    success: function(data) 
    { 
     $('.content').html(data); 
    }, 
    error: function() 
    { 
     $('.content').html('error'); 
    } 
}); 

Amusez-vous bien jouer à Arround!

Si vous devez avoir des temps de chargement rapides qui empêchent le chargement, vous pouvez ajouter un délai d'attente quelconque.

Answer 4

Ceci est très simple et facile à gérer.

jQuery(document).ready(function(){ 
jQuery("#search").click(function(){ 
    jQuery("#loader").show("slow"); 
    jQuery("#response_result").hide("slow"); 
    jQuery.post(siteurl+"/ajax.php?q="passyourdata, function(response){ 
     setTimeout("finishAjax('response_result', '"+escape(response)+"')", 850); 
      }); 
}); 

}) 
function finishAjax(id,response){ 
     jQuery("#loader").hide("slow"); 
     jQuery('#response_result').html(unescape(response)); 
     jQuery("#"+id).show("slow");  
     return true; 
} 

Answer 5

<div id="load" style="display:none"><img src="ajax-loader.gif"/></div> 

function getData(p){ 
     var page=p; 
     document.getElementById("load").style.display = "block"; // show the loading message. 
     $.ajax({ 
      url: "loadData.php?id=<? echo $id; ?>", 
      type: "POST", 
      cache: false, 
      data: "&page="+ page, 
      success : function(html){ 
       $(".content").html(html); 
     document.getElementById("load").style.display = "none"; 
      } 
     }); 

Answer 6

//$(document).ready(function(){ 
 
// \t $("a").click(function(event){ 
 
// \t \t event.preventDefault(); 
 
// \t \t $("div").html("This is prevent link..."); 
 
// \t }); 
 
//}); \t \t \t 
 

 
$(document).ready(function(){ 
 
\t $("a").click(function(event){ 
 
\t \t event.preventDefault(); 
 
\t \t $.ajax({ 
 
\t \t \t beforeSend: function(){ 
 
\t \t \t \t $('#text').html("<img src='ajax-loader.gif' /> Loading..."); 
 
\t \t \t }, 
 
\t \t \t success : function(){ 
 
\t \t \t \t setInterval(function(){ $('#text').load("cd_catalog.txt"); },1000); 
 
\t \t \t } 
 
\t \t }); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t \t 
 
<a href="http://www.wantyourhelp.com">[click to redirect][1]</a> 
 
<div id="text"></div>

Answer 7

assurez-vous de changer ajax appel

async: true, 
type: "GET", 
dataType: "html",