Question

我有一个可以获得更多帖子的ajax功能。

但我想自动触发它。

我的html结构看起来像这样

<div class="header">
    ....
</div>
<ul id="grid">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <!-- load more content -->
</ul>
<div>
    ....
</div>
<div>
    ....
</div>
<div>
    ....
</div>
<div>
    ....
</div>
<div class="footer">
    ....
</div>

我现在正在使用此代码。

var count = 2;
    $(window).scroll(function(){
            if  ($(window).scrollTop() == $(document).height() - $(window).height()){
               loadArticle(count);
               count++;
            }
    });

该代码仅在用户到达页面底部时触发ajax函数。

有人能告诉我计算scrolltop的正确方法吗？

Answer 1

使用以下代码

function bindScroll(){

  if ($(window).scrollTop() >= $("#grid").height() - $(window).height() - 10) {

    // unbind scroll
    $(window).unbind('scroll');

    //call ajax function 
    loadArticle(count);

  }
}

function loadArticle(count){
   ....
   ..Ajax Call ..
   ....
   //bind sroll again
   bindScroll();
}

并在 $（document）.ready 部分调用 bindScroll（）功能来绑定滚动事件

Answer 2

好的，我使用了一些替代解决方案。

我希望它对其他人有用。

<script type="text/javascript">
jQuery(document).ready(function($) {  
var count = 2;
$.log(count);
var total = <?php echo $wp_query->max_num_pages; ?>;
            $(window).scroll(function(){
                    if (element_in_scroll("#inifiniteLoader")) {
                       if (count > total){
                            $("#inifiniteLoader").css('display','none');  
                            return false;  
                        }else{
                            $("#inifiniteLoader").css('display','block');  
                            loadArticle(count);  
                        }  
                       count++;
                    }
            }); 
function loadArticle(pageNumber) {
    $.ajax({
        url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
        type:'POST',
        data: "action=infinite_scroll&page_no="+ pageNumber, 
        success: function(html){
            $("#og-grid").append(html);    // This will be the div where our content will be loaded
        }
    });
    return false;
}
function element_in_scroll(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
});
</script>


#inifiniteLoader {
    margin: 20px 0;
    display:none;
}

将此代码放在您想要加载图片的位置。

<div style="text-align:center;" class="clear" id="inifiniteLoader">
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/loading.gif">
</div>

用于加载图片check here

在无限滚动上计算滚动顶部

2 个答案: