在ajax加载更多结果时，使用jquery设置/显示div的动画
我有一个页面，它循环遍历多个唯一id，并使用ajax将信息加载到与数据库表中的行相对应的div中。因为需要创建相当多的div，并且每个div包含相当多的信息，所以这需要相当长的时间。我想做的是在每个div被附加到dom之后，对其进行动画/显示，从而允许循环在创建更多div时继续附加/显示它们 我的代码如下所示：在ajax加载更多结果时，使用jquery设置/显示div的动画,ajax,jquery,Ajax,Jquery,我有一个页面，它循环遍历多个唯一id，并使用ajax将信息加载到与数据库表中的行相对应的div中。因为需要创建相当多的div，并且每个div包含相当多的信息，所以这需要相当长的时间。我想做的是在每个div被附加到dom之后，对其进行动画/显示，从而允许循环在创建更多div时继续附加/显示它们 我的代码如下所示： // loop section unique IDs $.each(uniqueIDs, function(key, uniqueID) { // call AJAX sync
// loop section unique IDs
$.each(uniqueIDs, function(key, uniqueID)
{
// call AJAX synchronously
// append resulting information to page
// show newly appended div
$("#" + uniqueID).slideDown();
});
// 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();
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这里有一个同步运行AJAX往往会对事情产生这种影响，因为浏览器挂起并等待芬兰语请求，同时无法运行动画。你应该这样做：
// loop section unique IDs
$.each(uniqueIDs, function(key, uniqueID)
{
// call AJAX synchronously
// append resulting information to page
// show newly appended div
$("#" + uniqueID).slideDown();
});
// 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，或者您自己的加载函数，它接受回调。在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>
...
基本上，.empty（）函数保证加载的png将被删除，然后替换为所需的数据
祝您好运。Ajax是异步的，因此您需要在Ajax函数的回调中执行滑动操作，而且您可能不应该同步使用Ajax。对用户来说，对数据执行大量同步Ajax调用要比异步调用慢得多。您应该异步执行，并将slideDown代码放在ajax调用的成功部分。有没有办法避免这种情况，然后使用回调？您可以保留一个uniqueid及其状态的列表。每次ajax调用结束时，您都会将这个uniqueID的状态设置为complete或诸如此类。然后，您将循环浏览此列表，以确保此唯一ID下的所有内容都已显示，如果未显示，则显示第一个不完整的ID。希望这有意义！如果您有100个UniqueID，这不会因为浏览器的XHR限制而取消前90个请求吗？在您的演示中，对
document.write（）div$.ajax.when（）done