Question

此处按钮从数据库加载数据。工作良好。

<li class="getmore" id="'.$post_id.'"><a>Load More  Posts</a></li>

如何在向下滚动到页面底部时自动点击此按钮。只是无限滚动。

我应该使用窗口滚动功能。如果是，那么如何在此代码中执行此操作。

我试过在这个函数中粘贴ajax代码但没有工作。

修改： 1.当我把Ajax放在scroll函数中时，它会在getmore.php中显示mysql错误。 2.如果我在滚动功能中放置了具有点击功能的按钮类，那么它会发射得太快，会多次加载相同的帖子。

＆＃13;

$(document).scroll(function(){
  if ($(window).scrollTop() + $(window).height() >= $(document).height()) {

  }
});


$('body').on('click','.getmore',function(){

  var lastelement = $(this ).attr('id');
  			 
  $.ajax({
    type       : 'GET',
    url        : 'getmore.php',
    data       : 'lastelement='+lastelement,
    beforesend :  function(){

      $('.getmore').html('loading....');

    }, 
    success: function(data){
      $('.getmore').remove();
      $('#recs') .append(data) ; 
    }
  });

});

＆＃13;

<?php

      $lastelement = $_REQUEST['lastelement' ];
      include("connect2.php");

      if ($lastelement!=''){

        $query   = "SELECT * FROM `posts` "

                 . "WHERE (id < " . $lastelement . " AND "
                 .         "post_keywords like '%home%') " 

                 . "ORDER BY `posts`.`id` DESC  "
                 . "LIMIT 10";

        $records = mysql_query($query);


        if (mysql_num_rows($records)) {
     
          while($record = mysql_fetch_array($records)){

            $cookie_name = 'tcVotingSystem'.$record['id'];
    		$post_title = $record['post_title'];
            $post_id = $record['id'];
            $post_date = $record['post_date'];
            $post_author = $record['post_author'];
            $post_image = $record['post_image'];

            $post_image2 = $record['post_image2'];
            $post_keywords = $record['post_keywords'];
            $post_content = substr($record['post_content'],0,100);
?>

<div>
  //posts goes here
</div>

＆＃13;

Answer 1

一旦滚动到达某个点，您要做的就是关闭相同的Ajax请求。因此，不要在滚动时插入click事件函数，而是触发Ajax事件

示例：

$(document).scroll(function(){
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {

    $.ajax({
         type: 'GET',
         url: 'getmore.php',
         data:'lastelement='+lastelement,
            beforesend: function(){
                $('.getmore').html('loading....');
            },       
            success: function(data){
                $('.getmore').remove();
                $('#recs') .append(data) ; 
            }
    });
    }
});

以上只是一个例子。顺便说一句，我建议您为延迟加载ajax调用创建一个函数，因为您可能需要多次使用它，即单击并滚动。

希望这有帮助

Answer 2

为避免在快速滚动期间出现多次加载，您可以采用这种简单的方法：

var isLoadingNewPage = false; //initializing the flag

$(document).scroll(function(){
    if ($(window).scrollTop() + $(window).height() >= $(document).height())
    {
        if(!isLoadingNewPage)
        {
            $('.getmore').click(); //go for next page load
        }
    }


    $('body').on('click','.getmore',function(){
     //if the ajax request is going on then don't make another request; simply return back
     if(isLoadingNewPage)
         return; 

     var lastelement = $(this ).attr('id');

     $.ajax({
            type: 'GET',
            url: 'getmore.php',
            data:'lastelement='+lastelement,
            beforesend: function(){
                $('.getmore').html('loading....');
                isLoadingNewPage = true; //setting the flag so that no more call needed till the time response comes back
            },       
            success: function(data){
                $('.getmore').remove();
                $('#recs') .append(data) ;

                isLoadingNewPage = false; //resetting the flag so that ajax can happen again if user scroll again
            }
        });
    });
});

Answer 3

另一种方法是在页面末尾放置一个按钮，因此在滚动时，您可以检查该按钮是否正在视口中进入并触发点击

为避免每次都显示相同的帖子，请更改getmore ID以及从ajax调用中获取的最后一个ID

        $.fn.isInViewport = function () {
                        var elementTop = $(this).offset().top;
                        var elementBottom = elementTop + $(this).outerHeight();
                        var viewportTop = $(window).scrollTop();
                        var viewportBottom = viewportTop + $(window).height();
                        return elementBottom > viewportTop && elementTop < viewportBottom;
                    };

                 if ($('.getmore').isInViewport()) {
                    $('.getmore').click();
                 } 

                $(window).scroll(function(){
                   if ($('.getmore').isInViewport()) {
                    $('.getmore').click();
                 } 

            $('body').on('click','.getmore',function(){

              var lastelement = $(this ).attr('id');

              $.ajax({
                type       : 'GET',
                url        : 'getmore.php',
                data       : 'lastelement='+lastelement,
                beforesend :  function(){

                  $('.getmore').html('loading....');

                }, 
                success: function(data){
    /*
to avoid to show the same posts everytimes 
 change the getmore ID with the last ID retrieved from ajax call 
*/
                  $('.getmore').attr('id', (lastelement + $('.getmore').attr('id')));
                  $('#recs') .append(data) ; 
                }
              });

            });
                });

当您的Ajax响应为空时，可以删除.getmore按钮

如在其他答案中所建议的，引入isLoadingNewPage变量是一种很好的做法

如何点击此按钮向下滚动以获得无限滚动？

3 个答案: