jQuery - 仅在ajax调用需要一秒以上时才显示加载图像？

仅当ajax调用花费的时间超过一秒钟时，是否可以显示“加载..”动画？我的一些ajax调用非常快，但在消失之前，我仍然可以看到加载图标几分之一秒。可能只是我，但我发现它让人分心。我不想完全删除它。有什么建议么？这里是我的代码 -jQuery - 仅在ajax调用需要一秒以上时才显示加载图像？

$('#loading').hide() 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    }); 

<div id="loading"> 
    <img alt="Loading, please wait.." src="/content/images/spinner.gif" /> 
</div>

来源

2012-01-31 tempid

你应该把你的代码在一个定时器：

var $loader = $('#loading'), timer; 

$loader.hide() 
    .ajaxStart(function() 
    { 
     timer && clearTimeout(timer); 
     timer = setTimeout(function() 
     { 
      $loader.show(); 
     }, 
     1000); 
    }) 
    .ajaxStop(function() 
    { 
     clearTimeout(timer); 
     $loader.hide(); 
    });

来源

2012-01-31 04:45:25

非常感谢！它像一个魅力。 – tempid 2012-01-31 04:51:36

@Joseph我有同样的问题，感谢张贴这个解决方案。我可以澄清语法 - var $ loader = $（“＃loading”），timer;正在创建包含计时器和选择器id =加载的jquery对象。定时器&& clearTimeout（定时器）;为什么这是这样写的，而不是简单的clearTimeout（定时器）？我曾尝试类似，但只是成功推迟了演出，而不是仅在x毫秒后出现。仍然不清楚如何封装全球事件达到它所达到的目标。你能扩展吗？ – codepuppy 2012-09-13 14:37:18

@codepuppy - 'clearTimeout'需要一个计时器ID作为其参数。第一次运行'ajaxStart'时，'timer'将会是未定义的。虽然将undefined传递给'clearTimeout'似乎没有引发任何错误，但我还没有对它进行足够的测试，所以我决定首先检查'timer'是否有一个id。知道'timer && clearTimeout（timer）;'相当于'if（timer）{clearTimeout（timer）; }'。 – 2012-09-13 18:41:22

你可以使用一个setTimeout()。

var loadingTimeout; 
$('#loading').hide() 
.ajaxStart(function() { 
    var element = $(this); 
    loadingTimeout = setTimeout(function() { 
     element.show(); 
    }, 1e3); 
}) 
.ajaxStop(function() { 
    clearTimeout(loadingTimeout); 
    $(this).hide(); 
});

来源

2012-01-31 04:46:17 alex

这也适用。谢谢你，先生。 – tempid 2012-01-31 04:52:37

1）你必须捕获'element'作为参数。 2）不要传递'element'，因为它没有定义 - 传递'this'。 3）这在IE中不起作用，因为它不允许你以这种方式传递参数。 – 2012-01-31 04:54:11

@JosephSilber我有一个糟糕的一天编码...将修复。 – alex 2012-01-31 05:25:12

jQuery - 仅在ajax调用需要一秒以上时才显示加载图像？

回答

相关问题