使用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加载更多结果

回答

相关问题