2

スクロールするページが長いので、ページの内容を順番に読み込んでいきたいです。

<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() を試しましたが、シーケンスを作成できません。助けてください！

4

6 に答える 6

4

jQuery.load();を使ってみてください。、

$("#one").load("../content1.php", function() {
  $("#two").load("../content2.php", function() {
    // likewise
  });
});
于 2013-03-28T05:22:16.503 に答える
2

ajaxを使用する必要があります。このメソッドを使用すると、成功時に何が起こるかを指定できます。したがって、最初の div のコンテンツをロードしたら、成功したハンドラーで 2 番目の 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);
                    }
                });

            }
        });

    }
});

ただし、覚えておいてください - ローカル ファイルでは動作しません -Chrome少なくともajax. もちろん、Chromeオプションを変更する方法はありますが、私はそれを試しません。

于 2013-03-28T05:20:59.453 に答える
1

あなたはこれを行うことができます ：

$('#one').load("one.php", function() {  // first div loaded
    $('#two').load("two.php", function() { // second div loaded
        $('#three').load("three.php", function() { // third div loaded  });
    });
});
于 2013-03-28T05:23:16.897 に答える
0

2 つの方法:

1) タイマーを使用して 2000 ミリ秒ごとにページ コンテンツをロードするなど。 2) 次の部分をロードする必要があることを JS に通知するイベントを発生させる必要があります [例は fb のフィードです。下にスクロールすると、後半の部分のロードが開始されます。 ]

ロードは $('#one').load("one.html"); で簡単に実行できます。

于 2013-03-28T05:26:32.850 に答える
0

オプション 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();
    });
于 2013-03-28T05:30:14.937 に答える
0

jQuery.load を使用してコンテンツを div にロードする場合、.load 関数にはコールバック関数パラメーター (つまり、コンテンツのロードが完了した後に呼び出す関数) があります。これにより、必要な順序で確実にロードできるようになります ( http://api.jquery.com/load/を参照) 。

例えば：

$("#one").load(url, function(response, status, xhr) {
     $("#two").load( ... etc )
});
于 2013-03-28T05:24:01.290 に答える