Ajax loader image：如何設置加載程序顯示的最短持續時間？

我正在使用Jquery實現Ajax功能，並使用加載程序圖標向用戶指示正在檢索數據。但是，我希望用戶至少可以看到加載程序圖標1秒，即使數據的檢索時間少於1秒（如果要求超過1秒，加載程序圖標在整個持續時間內都應保持不變）。對於裝載HTMLAjax loader image：如何設置加載程序顯示的最短持續時間？

<img id="loader" src="example.com/images/ loader.gif" style="vertical-align: middle; display: none" />

我使用jQuery阿賈克斯功能爲我的數據處理代碼。

來源

2011-02-17 whamsicore

我會使用開始於2和1秒後遞減，當Ajax響應進來沿着這些東西線計數器：

var counter = 2; 
function decrement() { 
    if (--counter == 0) { 
    $('#loader').hide(); 
    } 
} 
setTimeout(decrement, 1000); 
$.ajax(..., complete: decrement);

來源

2011-02-17 07:23:04

這不會工作我的朋友。這將允許加載程序顯示最多2秒，而在生產中，加載程序不應出現，直到ajax響應完成。這段代碼所做的唯一事情是確保最小加載器顯示時間爲1秒。但是，最長時間應該等於ajax請求將花費的時間！儘管感謝您的輸入/努力！ – whamsicore 2011-02-19 08:41:07

@whamsicore爲什麼它不工作？我很確定它會。 setTimeout只會觸發一次 - 您可能會想到setInterval，它會一遍又一遍地重複。所以這種方法將完成所要求的：在ajax請求完成之前顯示加載器，但不少於1秒。 – 2011-02-20 04:46:14

首先，顯示加載程序映像，然後使用setTimeout()來啓動一個定時器，定時器完成後，檢查AJAX是否完成，如果它已經殺死了加載器映像，但是如果它沒有對加載程序映像做任何事情並設置標誌。當AJAX成功處理程序被調用時，檢查標誌;如果標誌被設置，則定時器已經結束，成功處理程序可以刪除加載程序映像;如果該標誌沒有設置，則成功處理程序可以讓計時器殺死加載程序映像。

本質上，你有兩個異步任務運行（超時和AJAX）。最後一個殺死加載器映像。

來源

2011-02-17 07:04:23

在這裏你去。看到它在行動http://jsfiddle.net/B4Cge/

var loader = '<img id="loader" src="http://tools.patentcalls.com/images/spinner.gif"/>'; 

    $(loader).appendTo('#container').load(function() { 
     $('#container').find('#loader').delay(3000).fadeOut(function() { 
      $('#container').append('your ajax content') 
     }) 
    });

來源

2011-02-17 07:58:30 Hussein

Ajax loader image：如何設置加載程序顯示的最短持續時間？

回答

相關問題