jQuery在Ajax完成加載後執行加載消息！

我嘗試在進行ajax調用之前顯示ajax loader gif。 Firefox是唯一按順序執行此操作的瀏覽器。所有其他瀏覽器先完成ajax調用，然後顯示加載器。

此代碼：

$(#element).click(function(evt){ 

    tmp_eleX = $this.offset().left; // get current left position of element 
    tmp_eleY = $this.offset().top; // get current top position of element 

    $('#ajax_loader').css({top: tmp_eleY-208}); // show ajax loader which was placed outside viewable area (-9999) 

    $.ajax({ 
    url: "some_file.cfm", 
    cache: false, 
    dataType: "html", 
    async: false, // wait for loading to finish before continuing code 
    timeout: 30000, 
    error: function(){ 
     return true; 
    }, 
    success: function(data) { 
     $('#someelementtoinject_ajaxdata').html(data); 
    } 
    });       

    $('#ajax_loader').css({top: -9999}); // move ajax loader off screen - for testing i comment out this line to see when the loader shows! 

});

這是巴蒂推動我。我試着包裝Ajax調用在

window.setTimeout(function(){ 
}, 0);

阿賈克斯裝載機展現在所有瀏覽器中的Ajax調用，問題的GIF動畫不是動畫，直到阿賈克斯完成加載的東西之前！

我也試過：

$('#ajax_loader') 
    .ajaxStart(function() { 
     $(this).css({ 
     top: -208 
     }) 
    }) 
    .ajaxStop(function(){ 
     $(this).css({ 
     top: -1000       
     }) 
    });

同樣的結果阿賈克斯.ajaxStart觸發之前完成了，心裏很不舒服：/！在這裏，只有Firefox能夠正常工作並在ajax調用之前顯示動畫。

似乎在所有瀏覽器中工作的唯一方法是設置ajax調用'async：true'。在繼續之前加載ajax是非常重要的，並且可能觸發頁面上的另一個Ajax調用。

關於如何在ajax完成之前觸發加載器的任何想法？在代碼繼續之前，還需要完成ajax。

我沒想到這個@^& ^＃@我的大腦出血：/

來源

2011-03-29 PixelGrinch

爲什麼在調用ajax調用中的「成功」或「完成」之前將裝載程序移出屏幕？ – justkt 2011-03-29 15:23:40

我認爲這是沒有dom操縱的最快方法。加載程序元素已經存在。我這樣做很自然。取決於哪個元素被點擊過，加載器在屏幕上有不同的位置，觸發位置改變似乎是最好的解決方案。但考慮到我的結果和問題，我完全接受其他建議。 – PixelGrinch 2011-03-29 15:27:09

你不應該移動你的裝載機，直到你完成了ajax，否則它會在屏幕上和屏幕之外快速閃爍。 – justkt 2011-03-29 15:53:15

async: false, // wait for loading to finish before continuing code

這似乎是你的問題 - 你是不是使得AJAX調用異步，因此（我猜測），控件沒有返回到瀏覽器，所以它在AJX調用返回之前無法響應'show the gif'動作。真：

來源

2011-03-29 15:29:16 belugabob

我以爲把它放在一個setTimeout包裝將有所幫助，它做了，但gif動畫不是動畫。是否有另一種方法來檢查負載是否已完成，以便後續正常工作？ – PixelGrinch 2011-03-29 15:32:03

最簡單的解決方案是異步執行AJAX調用（畢竟，這就是AJAX的'A'所代表的意思）。但是，如果您希望阻止用戶表單在執行AJAX調用時執行其他操作，則會引入問題。這完全取決於您如何看到應用程序進度的工作流程。 – belugabob 2011-03-30 11:58:58

感謝您的快速解答...

我加入一個全局變量這也使其成爲一個選項，以把異步解決了這個問題。我把全局標誌設置爲ajax調用成功函數中的最後一個動作。

來源

2011-03-29 15:47:42 PixelGrinch

jQuery在Ajax完成加載後執行加載消息！

回答

相關問題