0

Web サイトを開発していて、ページのスクロール時にデータを動的にロードしたいのですが、スクロール バーがページの下部に達したときに、AJAX を使用してデータベースからさらにデータをロードしたいと考えています。

私の Web ページには、新しいデータを追加したい iframe があります。flipkart.com Web サイトのように。ページをスクロールすると、新製品が読み込まれる場所。

この点で誰かが私を助けることができますか?

前もって感謝します。

私は何度も試しましたが、GetActivity() が呼び出されたときにのみ得られる運はありません。下にスクロールすると、GetActivity() は呼び出されませんが、その時点から上にスクロールすると、javascript 関数 GetActivity が呼び出されます。 ()そして、これを繰り返すと、ここでは機能しません。これは、Greg から提供されたコードを使用したものです。これを調べて助けてください。

<html>
<head>
<script type="text/javascript" src="jQuery-1.4.1-min.js"></script>
<script type="text/javascript">
$(window).scroll(function() {
    var bottom = getBottom(window),
        $reset = $("#activity_reset");
    if (bottom == $(this).scrollTop() && $reset.val() == 0) {
        $reset.val(1);
        $("#activity_loading").show();
        if ($("#activity_full").val() == 0) {
            setTimeout("GetActivity();", 100);
        }
    }
});
function getBottom(e) {
    height          = $(document).height();
    windowheight    = $(e).height();
    return height - windowheight;
}
function GetActivity()
{
alert("got it!");
$('div.tt').html('1');
$('div.ttt').html('1');
}
function setting()
{
$('div.tt').html('0');
$('div.ttt').html('0');
}
</script>
</head>
<body onload="return setting()" >
<pre>
<!--here i have used some junk texts so that a scroll bar appears in the browser-->
</pre>
<div style="display:none" id="activity_full" class="ttt"></div>
<div style="display:none" id="activity_reset" class="tt"></div>
</body>
</html>
4

1 に答える 1

2

これにより、ページが監視され、ページの一番下までスクロールしたときに関数 GetActivity() が読み込まれます。そこに ajax 呼び出しを配置し​​、それに応じてこれを編集して、ページに表示したいデータを表示できます。

$(window).scroll(function() {
    var bottom = getBottom(window),
        $reset = $("#activity_reset");

    if (bottom == $(this).scrollTop() && $reset.val() == 0) {
        $reset.val(1);
        $("#activity_loading").show();

        if ($("#activity_full").val() == 0) {
            setTimeout("GetActivity();", 1000);
        }
    }
});

function getBottom(e) {
    height          = $(document).height();
    windowheight    = $(e).height();

    return height - windowheight;
}

function GetActivity() {
    /* ajax call in here */
}

ウィンドウがスクロールされると、.scroll(function()) がトリガーされます。getBottom(window) 関数は、ドキュメントの高さと画面の高さを計算し、それらを差し引いて、ユーザーのウィンドウが画面の下部に達しているかどうかを確認します。$("#activity_reset") は、後で使用するために識別子に格納されます。

アクションが起動されると、一度に複数回 ajax が起動されないように、リセット値が 1 に設定されます。ローディング バーが表示され、GetActivity() 関数のタイムアウトが設定されます。

$("#activity_reset") -> 1 または 0 のいずれかの値を保持する、ページ上の非表示の div である必要があります。0 として初期化する必要があります。ユーザーのブラウザーがページの下部に到達すると、ajax 呼び出しが開始されます。ロードが完了したら、値を 0 に戻して、再度ロードできるようにする必要があります。

$("#activity_show") -> 読み込み中の画像を含むページ上の非表示の div にするか、何かが読み込まれていることを示す単純なテキストにする必要があります (必須ではありませんが、ユーザー エクスペリエンスには確かに役立ちます)。

$("#activity_full") -> div がいっぱいになったときにそれ以上コンテンツを読み込んではいけないことを識別するために使用される別の非表示の div です。0 に初期化する必要があり、ページに収まる数のアイテムをロードしたら、それ以上のロードを防ぐために (おそらく GetActivity() 関数で) 1 に設定できます。

さらに説明: GetActivity() 関数内で次のように変更します。

$('div.tt').html('1');
//returns <div class="tt">1</div>

に

$('div.tt').val(1);
//returns <div class="tt" value="1"></div>

あなたのコードは div の html を 1 に設定しています。実際に必要なのは、スクリプトが比較でチェックしているため、value 属性を 1 に等しくすることです。$('div.ttt') も 1 に設定していることにも気付きましたが、これによりスクリプトがそれ以上読み込まれなくなります。これは、条件が満たされ、アイテムをロードしたくない場合にのみ 1 に設定する必要があります。

$num = 6; //number of items per page
if($num == 6)
    $('div.ttt').val(1);

問題が解決することを願っています。お知らせ下さい。

于 2012-09-25T14:55:36.427 に答える