JQuery - показывать загружаемое изображение только в том случае, если вызов ajax занимает более одной секунды?
Можно ли показать анимацию "Загрузка.." только в том случае, если вызов ajax занимает больше, чем сказать, на одну секунду? Некоторые из моих вызовов 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>
Ответы
Ответ 1
Вы должны поместить свой код в таймер:
var $loader = $('#loading'), timer;
$loader.hide()
.ajaxStart(function()
{
timer && clearTimeout(timer);
timer = setTimeout(function()
{
$loader.show();
},
1000);
})
.ajaxStop(function()
{
clearTimeout(timer);
$loader.hide();
});
Ответ 2
Вы можете использовать setTimeout()
.
var loadingTimeout;
$('#loading').hide()
.ajaxStart(function() {
var element = $(this);
loadingTimeout = setTimeout(function() {
element.show();
}, 1e3);
})
.ajaxStop(function() {
clearTimeout(loadingTimeout);
$(this).hide();
});