顯示AJAX加載符號

我們用類似這樣的顯示AJAX加載符號

var $loading = $('#loadingDiv').hide(); 
$(document) 
    .ajaxStart(function() { 
    $loading.show(); 
}) 
.ajaxStop(function() { 
    $loading.hide(); 
});

代碼在我們的頁面，我們有很多的AJAX調用和裝載符號的方式往往彈出。有沒有辦法讓它只顯示如果ajax調用超過3秒？

來源

2014-04-03 Nick

頂我的腦袋不jquery有.delay()？

var $loading = $('#loadingDiv').hide(); 
$(document) 
    .ajaxStart(function() { 
    $loading.delay(3000).show(); 
}) 
.ajaxStop(function() { 
    $loading.hide(); 
});

來源

2014-04-03 19:52:11

我不認爲延遲會在這裏工作，因爲它不能被取消。因此，如果ajax在2秒內完成，加載動畫將在加載後1秒出現，並且永遠不會隱藏。 – Smeegs

你可以添加一個計時器，當阿賈克斯還沒有發射的情況下完成清零定時器。

var $loading = $('#loadingDiv').hide(); 
var timeOutHandler; 
$(document) 
    .ajaxStart(function() { 
    timeOutHandler = setTimeout(function(){$loading.show();}, 3000); 
}) 
.ajaxStop(function() { 
    clearTimeout(timeOutHander); 
    $loading.hide(); 
});

來源

2014-04-03 19:52:18 Smeegs

看起來像你使用'clearInterval'而不是'clearTimeout' – aravind

良好的捕獲，修復。 – Smeegs

如果您更正了第2行中的錯字'timeOutHander'，我認爲解決方案非常完美。 –

嘗試使用超時，這樣

var $loading = $('#loadingDiv').hide(); 
var loadingTimer; 
$(document) 
    .ajaxStart(function() { 
    // clear existing if any 
    clearTimeout(loadingTimer); 
    loadingTimer = setTimeout(showLoading, 3000) 
}) 
.ajaxStop(function() { 
    // clear timeouts that haven't yet happened 
    clearTimeout(loadingTimer); 
    $loading.hide(); 
}); 
function showLoading(){ 
    $loading.show(); 
}

快速，乾淨

來源

2014-04-03 19:55:38 aravind

有一個可愛的小插件這裏

https://github.com/bstaley/aspectorientedajax/blob/master/aOAjax.js

你可以通過它預先和後期功能。它將鉤入ajax請求並跟蹤未完成的請求。例如，如果您有5個互相重疊的Ajax調用，它可以在第一個顯示，並在最後一個之後隱藏。這是香草JavaScript，只需要調用一次，它就像new AjaxAspect(showFunc,hideFunc);

這裏是一個小提琴，應該告訴你如何實現這一點。 http://jsfiddle.net/bstaley/9VaeC/

來源

2014-05-02 12:58:00

顯示AJAX加載符號

回答

相關問題