ajax загрузка изображения с задержкой? - PullRequest
Новая
       9

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

1 голос
/ 15 ноября 2010

У меня в настоящее время реализован 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);
   }
});

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

Ответы [ 3 ]

1 голос
/ 15 ноября 2010

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

window.setTimeout(function() {
    alert('this will be executed 3 seconds later');
}, 3000);
0 голосов
/ 17 ноября 2010

Я не уверен, что полностью понимаю ваш вопрос, но при условии, что 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, чтобы гарантировать, что изображение также скрывается в случае сбоя запроса.

0 голосов
/ 15 ноября 2010

Поиск в Google setInterval и setTimeout будет делать то, что вы хотите в сочетании с jquery

...