CODEWITHSUNDEEP
jqueryajaxloader
Beginner
Beginner

Reputation: 111

ajax loading image with delay?

I currently have ajax implemented to refresh my content but I want to add a delay to it - anyone know how I can add that in to this code which I have?

$.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 sorry, what I mean is a delay just before the new content has loaded, I want to show the loading image just before the new content is displayed...does that make sense?

Upvotes: 1

Views: 2177

Answers (3)

Leo Lobeto
Leo Lobeto

Reputation: 454

I'm not sure I fully understand your question, but assuming ajaxloader.gif is the loading image, it will never show because it will be immediately replaced by the received content.
The ajax request would be itself an adequate delay. I think moving the <img line out from the success handler would be enough to see the image for a moment before new content arrives:

// 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);
   }
});

If you still want an extra delay before showing new content, you can use setTimeout method like this:

// 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);
   }
});

Consider handling ajax errors to ensure that image also hides if the request fails.

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038800

I don't quite understand what you mean by delay in your scenario but you could use the setTimeout function to schedule the execution of some callback at a later moment:

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

Upvotes: 1

Oliver M Grech
Oliver M Grech

Reputation: 3171

search google setInterval and setTimeout it will do what you want in conjunction with jquery

Upvotes: 0

Related Questions