0

素敵な ajax/jquery 無限スクロール プラグイン ( http://hycus.com/2011/03/15/infinite-scrolling-like-new-twitter-with-php-mysql-jquery/ )を見つけました。私の内容には問題ありませんが、問題が 1 つあります。loadmore.php スクリプトは 1 回しか呼び出されません。コードを示しましょう：

私のindex.phpファイルでは：

<script type="text/javascript">
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()){
            $('div#loadmoreajaxloader').show();
            $.ajax({
                url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
                success: function(html){
                    if(html){
                        $("#postswrapper").append(html);
                        $('div#loadmoreajaxloader').hide();
                    }else{
                        $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                    }
                }
            });
        }
    });
</script>

このセクションは私の loadmore.php ファイルを呼び出し、最後の投稿の ID を送信します。これは、最初にページの一番下までスクロールしたときにのみ機能し、loadmore.php からエントリをロードしますが、loadmore.php を再度呼び出すことはありません。私の loadmore.php ファイルには次のコードがあります。

<?php

include('./includes/config.php');

if($_GET['lastid']){
    $query = 'SELECT * FROM db WHERE id < "'.$_GET['lastid'].'" ORDER BY id DESC LIMIT 0,3';
    $result = mysql_query($query);
    while ($rec = mysql_fetch_object($result)) {

    [SET MY VARS]

    ?>

    [HTML & PHP DISPLAYING MY POST]

    <?php
    }
}

?>

最初の ajax 呼び出しの後に表示される 3 つの投稿は、正確に正しいデータで表示したい方法で完全に表示されます。しかし、最初の 3 つの投稿が表示された後、次の 3 つの投稿が表示されません。

したがって、index.php にデフォルトで 5 つの投稿がある場合、一番下までスクロールすると、ajax がさらに 3 つの投稿を呼び出し、完全に表示されますが、表示する投稿がたくさん残っているにもかかわらず、その後は何も表示されません。私の問題、ajax/jquery ウィザードはどこですか?

4

2 に答える 2

2

次の mod を使用した上記のコード例は、下から固定された高さで関数をトリガーするように機能しますか??

追加：

var trigger = $('#postswrapper').height() - 250;

そして変更：

if (st >= 0.7*h && !loading && h > 500) {

に：

if ((st == trigger) && (!loading) && (h > 500)) {
于 2012-10-21T22:02:49.683 に答える
1

「if」条件は、最初にスクロールしたときにのみ満たされます。つまり、基本的に、イベントは、ページの一番下までスクロールしたときではなく、スクロールを開始したときに発生します。コードを次のように置き換えます。

<script type="text/javascript">
    var loading = false;

    $(window).scroll(function(){
        var h = $('#postswrapper').height();
        var st = $(window).scrollTop();

         // the following tests to check if 
         // 1. the scrollTop is at least at 70% of the height of the div, and 
         // 2. another request to the ajax is not already running and 
         // 3. the height of the div is at least 500. 
         // You may have to tweak these values to work for you. 
        if(st >= 0.7*h && !loading && h > 500){
            loading = true;
            $('div#loadmoreajaxloader').show();
            $.ajax({
                url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
                success: function(html){
                    if(html){
                        $("#postswrapper").append(html);
                        $('div#loadmoreajaxloader').hide();
                    }else{
                        $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                    }
                    loading = false;
                }
            });
        }
    });
</script>
于 2011-09-20T22:46:19.763 に答える