如何在顶部滚动加载WordPress帖子循环


How to load WordPress Post Loop on top scroll?

当用户滚动到顶部时,我想在标题中加载更多文章。我用ajax来做。

infi.php

<?php
$infinite_loop= $_POST['pcount'];  ?>
<?php require('../../../../../wp-config.php');
$wp->init();
$wp->parse_request();
$wp->query_posts();
$wp->register_globals(); ?>
<div>
<?php wp_reset_query(); ?>



   <?php
                    global $wpdb;
                    $args = array( 'posts_per_page' => 10, 'order' => 'DESC', 'offset'=>$infinite_loop );    
                    $myposts = get_posts( $args );
                    foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
            <div class="infiarticle box">
                <div class="infithumb">
                    <?php the_post_thumbnail(array(300,150), true); ?>
                </div>
                <div>
                    <h2 class="post-title heading-font"> <a href="<?php echo get_permalink(); ?>"><span><?php echo the_title(); ?></span></a></h2>
                </div>
            </div>
                    <?php endforeach; 
                                wp_reset_postdata(); ?>

</div>    

标题脚本

<?php if ( is_single() ): ?>
    <script>
        $(document).ready(function() {
        var post_page_count = 0;
        var height_scroll = 800;
            $(window).scroll(function() {

    if($(window).scrollTop() == ($(document).height() - $('body').height())) {

        height_scroll = height_scroll-800;
        $('a#inifiniteLoader').show('fast');
                $.ajax({
                        type: "POST",
                        url: "wp-content/themes/demo/infinite.php",
                        data: {pcount:post_page_count},
                        success:
                        function(result){
                $('a#inifiniteLoader').hide('1000');
                            $("#infi").append(result);
                            }
                });
            post_page_count = post_page_count+10;
            }
});
});
</script>
<?php endif; ?>

它起作用了。当用户滚动到顶部时,我可以在标题顶部加载数据。但是有些问题我还没有解决。

  • 每次用户滚动到顶部时,加载的内容都会显示在其他加载的内容。例如,如果我滚动到顶部,那么文章一加载在标题中。再次向上滚动后第二篇正确加载。但是第二篇第一篇之后显示,我必须再次向下滚动查看它。我想显示第二篇之前第一条如何将新加载的内容显示在其他加载的内容之上

您需要将$("#infi").append(result);更改为$("#infi").prepend(result);,以便在#infi元素的开头插入内容。

参见jQuery.prepend()文档。