ajax加载图像延迟？答案

【问题标题】：ajax loading image with delay?ajax加载图像延迟？
【发布时间】：2010-11-15 14:39:17
【问题描述】：

我目前实现了 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);
   }
});

抱歉，我的意思是在新内容加载之前有延迟，我想在新内容显示之前显示加载图像...这有意义吗？

【问题讨论】：

你能再具体一点吗？你什么时候需要延迟？在ajax调用之间？在用新内容替换旧内容之前？从你的问题看不清楚。
我遇到了同样的问题，加载图标仅在 ajax 完成执行后“运行”。

标签： jquery ajax loader

【解决方案1】：

我不太明白您的场景中的延迟是什么意思，但您可以使用 setTimeout 函数来安排稍后执行某些回调：

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

【讨论】：

【解决方案2】：

谷歌搜索 setInterval 和 setTimeout 它将与 jquery 一起做你想做的事情

【讨论】：

【解决方案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 错误以确保在请求失败时图像也会隐藏。

【讨论】：