加入了動畫圖像，而jQuery的AJAX工作

我使用jQuery阿賈克斯，我的代碼看起來像這樣加入了動畫圖像，而jQuery的AJAX工作

$.get(
    'GetPage.aspx', 
    'url=' + url , 
    function (response) { 
     if (!cancelNavigationFlag) 
      setIframeHtml(response); 
     cancelNavigationFlag = false; 
    }, 
    'html' 
);

我需要添加一個gif動畫，而Ajax是工作將出現然後消失時阿賈克斯完成。

我該怎麼做？

來源

2011-06-20 Ovi

我有不同的邏輯和解決方案。

設置一個div，您希望gif圖像顯示爲<div id="loader">。

下一步，在css中設置它的背景圖像，不要設置圖像鏈接;

background: no-repeat center;

當AJAX執行，給它一個背景圖像loader.gif和Ajax任務完成時將其刪除，等等;

$.get(
    $("#loader").css({ 'background-image':'url(images/loader.gif)' }); 
    'GetPage.aspx', 
    'url=' + url , 
    function (response) { 
     if (!cancelNavigationFlag) 
      setIframeHtml(response); 
     cancelNavigationFlag = false; 
     $("#loader").css({ 'background-image':'url()' }); 
    }, 
    'html' 
);

我還沒有測試它自己。希望這會有所幫助..

來源

2011-06-20 06:49:30

謝謝。它爲我工作。任何想法，爲什麼它只適用於Firefox而不是Chrome？ – Ovi

讓我看看那個..你在IE中測試過嗎？ –

我沒有測試IE cuz我的網站在這一點上完全不能在IE上運行。 – Ovi

我常做這樣的事情：

$("#indicatordiv").show(); 
$.post("somepage", function(result){ 
    $("#indicatordiv").hide(); 
})

其中「indicatordiv」是包含裝載機gif圖片簡單的div元素。

因此，在您的情況下，只需將「.show（）」請求前的元素和「.hide（）」它放入響應函數中。

來源

2011-06-20 06:30:58

您可以添加一個div，其中包含一個圖像標記與加載器圖像。最初隱藏div。在調用ajax請求之前顯示div。並從Ajax請求獲取數據後隱藏div。

$("#dvLoader").show(); 
$.get(
    'GetPage.aspx', 
    'url=' + url , 
    function (response) { 
     if (!cancelNavigationFlag) 
      setIframeHtml(response); 
     cancelNavigationFlag = false; 
    }, 
    'html' 
    success: 
     function(data) 
     { 
      $("#dvLoader").hide(); 
     } 

);

dvLoader包含一個裝載機圖像。

來源

2011-06-20 06:34:59

你必須再次顯示它的'$獲得（）'成功回調。有了這個代碼，'＃dvLoader'會在調用'。.get（）'之後隱藏，而不是在加載內容之後隱藏。 –

@ MisterJack：謝謝.. –

加入了動畫圖像，而jQuery的AJAX工作

回答

相關問題