Question

我正在开发一个网站，我想从导航栏中获取所有链接，并将链接页面中的div加载到一个大容器中。到目前为止我所拥有的是：

$('nav a').each(function(index){
    var to_load = $(this).attr('href') + '#slides section';
    $('<section>').load(to_load, function(){
        $('#slides').append($(this).html());
    });
});

这很有效，除了它几乎总是乱序，这可能是因为异步加载它。有没有办法一次加载每个，所以这些部分将按顺序排列，同时仍保持灵活性？

提前感谢大家！

Answer 1

我会尝试async: false提及jQuery.ajax documentation。不知道它是否适用于load，但我敢打赌它可以。

另外，出于性能原因，请勿使用：

$(this).attr('href') + '#slides section'

但

this.href + '#slides section'

避免将this转换为jQuery元素（只需要它来获取href属性）。

Answer 2

var loadTos = [];
$('nav a').each(function(index){
    loadTos.append($(this).attr('href') + '#slides section');
});
function load_link(to_load) {
    $('<section>').load(to_load, function(){
        $('#slides').append($(this).html());
        loadTos.length && load_link(loadTos.pop());
    });
}
if(loadTos.length) {
   loadTos = loadTos.reverse(); // make getting urls from first to last
   load_link(loadTos.pop());
}

此代码将按时间顺序加载网址。它们将被逐一装载。

Answer 3

如@marcosfromero

所述，

async: false可能是一种选择

您可以尝试在上一个完成后调用load的另一个选项（好吧，看起来很像async:false）

var i = -1;  // this is because we will increment the value before using it
var collection = $('nav a');

function loadNext() {
    i++;
    if (i < collection.length) {
        var to_load = $(collection[i]).attr('href') + '#slides section';
        $('<section>').load(to_load, function(){
            $('#slides').append($(this).html());
            loadNext();
        });
    }
}

loadNext();

Answer 4

您创建一个递归函数，在.load完成时调用自身，从而保证顺序：

// grab array of links
var links = $('nav a').map(function() {
    return this.href;
}).get();

function loadSlides() {
    $('<section>').load(links[0] + '#slides section', function() {
        $('#slides').append($(this).html());

        // remove first item of links array
        links.shift();
        loadSlides();
    });
}

loadSlides();

load（）顺序，而不是与jQuery同时

4 个答案: