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調用需要一秒以上時才顯示加載圖像？

回答

相關問題