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

您需要使用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 2

尝试使用jQuery.load();，

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

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应该加载下一部分[例如fb中的feed，一旦你向下滚动就开始加载后一部分]

加载可以简单地通过$（'＃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();
    });

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

6 个答案: