jquery - 有没有办法用Jquery按顺序加载页面？

Question

我有一个长滚动页面，所以我想按顺序加载页面的内容。

<div id="one">one.php</div>
<div id="two">two.php</div>
<div id="three">three.php</div>

在页面加载时，我只想加载 DIV id ONE 的内容，然后是 DIV id TWO 然后是 DIV id THREE .. 等等..

我如何做到这一点？我创建了 3 个文件（one.php、two.php、three.php）尝试了 .load() 但我无法创建序列。请帮忙！

Answer 1

尝试使用jQuery.load(); ,

$("#one").load("../content1.php", function() {
  $("#two").load("../content2.php", function() {
    // likewise
  });
});

Answer 2

您需要使用ajax。此方法允许您指定成功时会发生什么。因此，一旦您将加载第一个 div 的内容，在成功处理程序中加载第二个 div 的内容，依此类推。像这样的东西：

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

$.ajax({
    url: 'div1.html',
    type: "GET",
    dataType: "html",
    success: function (response) {

        $("#div1").html(response);

        $.ajax({
            url: 'div2.html',
            type: "GET",
            dataType: "html",
            success: function (response) {

                $("#div2").html(response);

                $.ajax({
                    url: 'div3.html',
                    type: "GET",
                    dataType: "html",
                    success: function (response) {
                        $("#div3").html(response);
                    }
                });

            }
        });

    }
});

但请记住 - 它不适用于本地文件 - 您需要设置一些 Web 服务器，因为至少Chrome不想通过ajax. 当然有一种方法可以改变Chrome选项，但我不会玩它。

Answer 3

你可以这样做 ：

$('#one').load("one.php", function() {  // first div loaded
    $('#two').load("two.php", function() { // second div loaded
        $('#three').load("three.php", function() { // third div loaded  });
    });
});

Answer 4

如果您的意思是使用 jQuery.load 将内容加载到您的 div 中，则 .load 函数有一个回调函数参数（即在内容加载完成后调用的函数）。有了这个，您可以确保您可以按您需要的顺序加载它们（请参阅http://api.jquery.com/load/）

例如：

$("#one").load(url, function(response, status, xhr) {
     $("#two").load( ... etc )
});

Answer 5

2种方式：

1) 使用计时器每 2000 毫秒加载一次页面内容，等等。 2) 应该触发一个事件来告诉 JS 应该加载下一部分]

加载可以简单地通过 $('#one').load("one.html");

Answer 6

选项 1
使用 setTimeout

setTimeout(function() {
        $("#one").show();
    }, 1000);
setTimeout(function() {
        $("#two").show();
    }, 2000);
setTimeout(function() {
        $("#three").show();
    }, 3000);

选项 2
功能 2 功能转换。

$(document).ready(function() {
$("#one").show();
showTwo()
});

function showTwo()
{
$("#two").show();
showThree()
}

function showThree()
{
$("#Three").show();
}

注意：对于两者，您需要先在加载时隐藏它们。为此，请使用以下功能

$(document).ready(function() {
$("#one").hide();
$("#two").hide();
$("#three").hide();
    });