ajax Загрузка изображения с задержкой?

Question

В настоящее время у меня есть ajax для обновления моего контента, но я хочу добавить к нему задержку - кто-нибудь знает, как я могу добавить это в этот код, который у меня есть?

$.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); 
    } 
}); 

Ах жаль, что я имею в виду задержки как раз перед тем новое содержание загружается, я хочу, чтобы показать изображение загрузки только до появления нового контента ... делает ли это смысл?

Answer 1

поиск Google setInterval и SetTimeout он будет делать то, что вы хотите в сочетании с JQuery

Answer 2

Я не совсем понимаю, что вы имеете в виду задержки в вашем сценарии, но вы можете использовать функцию setTimeout запланировать выполнение некоторые обратный вызов в более поздний момент:

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

Answer 3

Я не уверен, что я полностью понимаю ваш вопрос, но при условии, ajaxloader.gif является загрузка изображения, он никогда не покажет, потому что он будет немедленно заменен полученным контентом.
Запрос ajax сам по себе является достаточной задержкой. Я думаю, что перемещение <img линии из обработчика успеха будет достаточно, чтобы увидеть изображение на мгновение, прежде чем новое содержание прибывает:

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

Если вы все еще хотите дополнительную задержки перед показом нового контента, вы можете использовать SetTimeout метод например:

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

Рассмотрите возможность обработки ошибок ajax, чтобы гарантировать, что изображение также скрывается, если запрос не работает.