Question

当用户滚动到顶部时，我想在标题中加载更多文章。我用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; ?>

它的工作。当用户滚动到顶部时，我可以在标题顶部加载数据。但是我还有一些问题无法解决。

每次用户滚动到顶部时，加载的内容都会显示在其他加载的内容。例如，如果我滚动到顶部，那么 第一条 在标头中加载。再次向上滚动 第二条 正确加载。但 第二条 会在 第一条 之后显示，我必须再次向下滚动看见了。我想先显示 第二条 第一条 。 如何在其他已加载内容的基础上显示新加载的内容？

Answer 1

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

请参阅jQuery.prepend() documentation。

如何在顶部滚动上加载WordPress Post Loop？

1 个答案: