使用jquery動畫/顯示div而ajax加載更多結果

我有一個頁面循環了多個唯一的id，並使用ajax將信息加載到與數據庫表中的行相對應的div中。因爲有相當多的div需要創建，每個div都包含大量的信息，這需要相當長的一段時間。我想要做的是在每個div附加到dom後動畫/顯示每個div，允許循環在創建時繼續附加/顯示更多div。使用jquery動畫/顯示div而ajax加載更多結果

我的代碼看起來是這樣的：

// loop section unique IDs 
$.each(uniqueIDs, function(key, uniqueID) 
{ 

    // call AJAX synchronously 
    // append resulting information to page 

    // show newly appended div 
    $("#" + uniqueID).slideDown(); 

});

我遇到的問題是，動畫是很不一致。有時第一個div是動畫的，而所有後續的div只是沒有動畫就顯示出來。有時候所有的div都只顯示沒有動畫。我敢肯定，必須有這樣做更嚴格的方式...

編輯我一直在呼籲AJAX同步保持的div按照正確的順序（否則的div追加到DOM順序他們完成）。我很樂意找到一個解決方案，它使用異步的ajax調用來保存原始順序。

來源

2012-09-12 adekom

Ajax是異步的，所以你需要在ajax函數的回調中做滑動的東西，而且你可能不應該同步地使用ajax。 – adeneo

爲用戶做很多同步ajax調用的速度比用戶異步執行要慢得多。你應該做異步並將slideDown代碼放入ajax調用的成功部分。 – Timm

如果我異步運行ajax，div是不按順序創建的（即按照異步ajax調用的完成順序）。有沒有辦法避免這種情況，然後使用回調？ – adekom

使用$.Deffered對象的數組，每個異步調用，然後把它傳遞給$.when()，其.done()回調將只有當所有延遲對象都解決了，火即當所有異步操作完成：

var uniqueIDs = [1, 2, 3, 4]; 
var $deferreds = [];    

$.each(uniqueIDs, function (i, elem) { 
    $deferreds.push(
     $.ajax({ 
     // options 
     }).done(function (data) { 
     }) 
    ); 
}); 

$.when.apply($, $deferreds).done(function() { 
    console.log(arguments); // arguments will contain the result of each asynchronous call in order 
});

因此，您可以使用該回調來按順序爲您的div s設置動畫。

這是DEMO。

來源

2012-09-13 00:05:59

如果您有100個唯一標識，那麼是否因爲瀏覽器的XHR限制取消了前90個請求？ – Alxandr

在您的演示中，對'document.write（）'的調用仍然沒有順序。即使我按正確的順序動畫了「div」的可見性，它們仍然會在頁面中失序......或者我錯過了什麼？ – adekom

@ user890857：是的，但那些是循環內'$ .ajax'的調用。在'.when（）'的'done'回調函數中，參數將按照您的預期順序排列，即參數[0]將會是數組中第一個uniqueId的結果等等。 –

同步運行AJAX往往會對事物產生這種影響，導致瀏覽器掛起並等待請求芬蘭語，並且無法在平均時間內運行動畫。你應該做的是這樣的：

// loop section unique IDs 
var queue = uniqueIDs.splice(0); // copy array 
function runQueue() 
{ 
    if(queue.length == 0) return; 
    var uniqueID = queue.shift(); 
    myAjaxLoadFunction(uniqueId, function() { 

     // show newly appended div 
     $("#" + uniqueID).slideDown(); 
     runQueue(); 

    }); 

}); 
runQueue();

OFC你可以替換使用jQuery函數調用，或您自己的加載至極功能myAjaxLoadFunction採用了回調。

來源

2012-09-13 00:06:54 Alxandr

我與異步ajax調用的問題是，divs是亂序創建的。如果我錯了，請糾正我，但遞歸運行ajax函數的方法仍然會導致在加載時創建div，而不是按照在數組中排序的方式創建div。 – adekom

不，因爲在時間（隊列）只加載1，因此它們將按照數組的順序出現。 – Alxandr

如何使用旋轉輪加載圖像在您的HTML中具有父級div。因此，像這樣：

您可能需要確定大小的DIV和之前他們的風格，但整體這裏就是我說的

<html> 
... 
<body> 
... 
<div id="div1"><img src="loading.gif"/></div> 
<div id="div1"><img src="loading.gif"/></div> 
<div id="div1"><img src="loading.gif"/></div> 
...

的javascript：

result = $.ajax(...) 
$("your divs").each(function(index, value) { 
    $(this).empty().append(result[index]); 
});

喜歡的東西那麼，$（this）是div，結果[index]是您從ajax請求獲得的行。
基本上.empty（）函數保證您的加載png將被刪除，然後用您想要的數據替換。

祝你好運。

來源

2012-09-13 00:12:46

使用jquery動畫/顯示div而ajax加載更多結果

回答

相關問題