ajax chargement de l'image avec délai?

Question

J'ai actuellement ajax mis en œuvre pour actualiser mon contenu, mais je veux y ajouter un délai - quelqu'un sait comment je peux ajouter cela dans ce code que j'ai?

$.ajax({ 
    url: "<?php echo site_url('apply/processpersonaldetails'); ?>", 
    type: 'POST', 
    data: form_data, 
    success: function(msg) { 
     $('#content').empty().html('<img src="../images/ajaxloader.gif" />'); 
     $('#content').html(msg); 
    } 
}); 

Ah désolé, ce que je veux dire un retard juste avant le nouveau contenu est chargé, je veux montrer l'image de chargement juste avant le nouveau contenu est affiché ... est-ce que du sens?

Answer 1

recherche google setInterval et setTimeout il fera ce que vous voulez en conjonction avec jquery

Answer 2

Je ne comprends pas tout à fait ce que vous entendez par un retard dans votre scénario, mais vous pouvez utiliser la fonction setTimeout pour planifier l'exécution de un certain rappel à un moment plus tard:

window.setTimeout(function() { 
    alert('this will be executed 3 seconds later'); 
}, 3000); 

Answer 3

Je ne suis pas sûr que je comprends parfaitement votre question, mais en supposant ajaxloader.gif est l'image de chargement, il ne sera jamais montrer, car il sera immédiatement remplacé par le contenu reçu.
La requête ajax serait elle-même un délai adéquat. Je pense que le déplacement de la ligne <img à partir du gestionnaire de succès serait suffisant pour voir l'image pour un moment avant le nouveau contenu arrive:

// Show the loading image before firing the ajax request 
$('#content').html('<img src="../images/ajaxloader.gif" />'); 
$.ajax({ 
    url: "<?php echo site_url('apply/processpersonaldetails'); ?>", 
    type: 'POST', 
    data: form_data, 
    success: function(msg) { 
     // New content replaces the loading image 
     $('#content').html(msg); 
    } 
}); 

Si vous voulez toujours un délai supplémentaire avant de montrer le nouveau contenu, vous pouvez utiliser la méthode setTimeout comme ceci:

// Show the loading image before firing the ajax request 
$('#content').html('<img src="../images/ajaxloader.gif" />'); 
$.ajax({ 
    url: "<?php echo site_url('apply/processpersonaldetails'); ?>", 
    type: 'POST', 
    data: form_data, 
    success: function(msg) { 
     // Insert one second delay before showing new content (not sure why) 
     window.setTimeout(function() { 
      // New content replaces the loading image 
      $('#content').html(msg); 
     }, 1000); 
    } 
}); 

Pensez à gérer les erreurs ajax pour vous assurer que l'image se cache également si la requête échoue.