如何解决错误无限滚动Javascript,向上滚动时不加载?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (104)

以下是我使用的代码:

 var busy = false;
  var limit = 6;
  var offset = 0;
  function displayRecords(lim, off) {
    $.ajax({
      type: "GET",
      async: false,
      url: "load/article-2.php",
      data: "limit=" + lim + "&offset=" + off,
      cache: false,
      beforeSend: function() {
        $("#loader_message").html("").hide();
        $('#loader_image').show();
      },
      success: function(html) {
        $("#results").append(html);
        $('#loader_image').hide();
        if (html == 0) {
          $("#loader_message").html('<br><span class="margintop20 padding10">No more records.</span>').show()
        } else {
          $("#loader_message").html('<br><span class="margintop20"><img src="file-server/loading.gif" width="24" height="24"> Loading please wait...</span>').show();
        }
        window.busy = false;
      }
    });
  }

  $(document).ready(function() {
    if (busy == false) {
      busy = true;
      displayRecords(limit, offset);
    }
    $(window).scroll(function() {
      if ($(window).scrollTop() + $(window).height() > $("#results").height() && !busy) {
        busy = true;
        offset = limit + offset;
        setTimeout(function() { displayRecords(limit, offset); }, 500);
      }
    });
  });

PHP CODE

$limit = (intval($_GET['limit']) != 0 ) ? $_GET['limit'] : 4; $offset = (intval($_GET['offset']) != 0 ) ? $_GET['offset'] : 0;
$article = "SELECT SQL_CALC_FOUND_ROWS * FROM article WHERE 1 AND status ='publish' ORDER BY id  DESC LIMIT $limit OFFSET $offset";
 try {
  $article1 = $pdo-> prepare($article); 
  $article1 ->execute();
  $results = $article1->fetchAll();
} catch (Exception $ex) {
  echo $ex->getMessage();
}if (count($results) > 0) {
foreach ($results as $data) {
include("../data/data.php");
echo "
    <div class='col-md-2 padding5 aos-item' data-aos='fade-up'>
      <div class='col-md-12 bgputih shadow padding10 hover-dark'>
      <a href='blog/$url' title='$stitle'> <img class='w-100 img-fluid' src='$fileserver/article/$dateimage/$imagem' alt='$stitle'> </a>
      <hr>
      <div class='titlearticle'>
        <a href='blog/$url' title='$stitle'>$title</a>
      </div>
      <div class='font10'>
      "; 
      include("../includes/bawah/sumber.php");
      include("../includes/bawah/article.php");
      echo"
    </div>
    </div>
    </div>
    ";
}
}

HTML CODE

<div class='padding10 margintop-10 row' id="results"></div>
<div id="loader_image"><img src="<?php echo "$fileserver/loading.gif"; ?>" width="24" height="24"> Loading... please wait</div>
<div class="col-md-12" align="center" id="loader_message"></div>
提问于
用户回答回答于

只有当窗口滚动到底部时,才应该执行Ajax调用

$(document).ready(function() {
//if (busy == false) { These lines will cause the AJAX call to be performed regardless of the window's scroll position and as such, they ought to be removed
  //busy = true;
  //displayRecords(limit, offset);
//}
$(window).scroll(function() {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight && !busy) {
   //you're at the bottom of the page
    busy = true;
    offset = limit + offset;
    setTimeout(function() { displayRecords(limit, offset); }, 500);
  }
 });
});

热门问答

怎样实现PDF文件在线浏览?

幻象丛林RESTful 服务开发者
推荐
一般浏览器自带pdf浏览,比如谷歌浏览器,你打开pdf结尾的文件就是浏览界面。 存放在cos中的pdf文件打开如果是直接下载的话,需要设置静态网站,才能正常访问存储桶中的文件,而不是直接下载。 开启静态网站配置后,您需要使用静态网站域名访问 COS 源站才能生效,如果使用 COS...... 展开详请

扩展能力之云调用,小程序端出错:[tcb-js-sdk]参数错误:非法的应用标识?

software微软、谷歌、腾讯、阿里、百度……
推荐
您好,appSign必须是小程序的appid,appSecret的两个字段必须是在云开发控制台-安全来源里配置过的。 image.png ... 展开详请

mysql 1h1g能带动多大的数据?

学生路人
推荐
您好,MySQL的处理速度主要看内存的缓存空间大小,缓存空间是否够用主要看业务热数据,而业务热数据是与业务访问相关的,腾讯云MySQL的存储引擎是固定的,都是innodb存储引擎,所以处理器这里不用考虑太多,主要关注innodb_buffer_pool_size是否够用,建议您先...... 展开详请

serverless db 如何管理?

Richel码农
推荐
1.支持pg_dump,psql工具进行数据导入和导出。 2.本地CLI,可以使用postgresql的客户端psql,也可以使用dbeavr,navicate,pgadmin等工具访问。 3.支持操作DB ,要自己写逻辑 ... 展开详请

安卓APP使用免费版加固后,在Android11系统上运行闪退,是什么原因?

hello,目前已经适配了Android R Beta1,预计这周内上线移动应用安全在线版,请留意日志更新

请问bugly上报的服务器是在哪?如果要发行海外版本,能把上报服务器调成海外吗?

所属标签

扫码关注云+社区

领取腾讯云代金券