美文网首页
ajax滚动到底部时阻止重复加载数据

ajax滚动到底部时阻止重复加载数据

作者: 毕竟1米八 | 来源:发表于2017-12-14 17:08 被阅读827次

    ajax滚动到底部时加载数据的原理和点击加载更多是一样的,上一篇已经详细介绍了,这里就不多说了。

    一、如何触发

    //滚动到底部时触发
    $(window).scroll(function() {
      if($(window).scrollTop() + $(window).height() >= $(document).height()){
        //ajax
      }
    })
    

    二、重复加载数据问题

    当网页滚动到底部时,加载一次数据。这时,鼠标滑轮往上滚然后再往下滚,会出现重复加载了同一页数据的情况,这种情况下加载了不必要的数据资源以及增加了服务器加载压力。这时,我们可以这样解决:

    1、先建立一个变量,判定是否加载中,防止重复加载。
    2、如果条件为true,锁定加载,ajax调取数据,并执行加载,取消锁定。

    var isbool=true;//触发开关,防止多次调用事件    
    $(window).scroll(function() {    
        if (($(this).scrollTop() + $(window).height()) >= $(document).height() && isbool==true) {      
            isbool=false;         
            //ajax  
        }      
    });  
    

    相关文章

      网友评论

          本文标题:ajax滚动到底部时阻止重复加载数据

          本文链接:https://www.haomeiwen.com/subject/wxgkwxtx.html