Question

我一直试图让一个infinte卷轴在wordpress中工作大约一个星期了，我已经尝试了各种不同的插件和不同的编码语言，我一直在努力让他们工作。我对Javascript JQuery或PHP不是很有信心这些对我来说都是新手。
我找到了一篇非常好的博文，并按照步骤http://www.affariproject.com/2015/03/ajax-lazyload-wordpress-pagination/进行了操作，这是我最接近它的工作方式。我的所有帖子都显示，所以是我的ajax加载器gif但是infinte滚动仍然无法正常工作:(。
如果任何人对我做错了什么有任何想法，我将不胜感激。我将在下面发布代码，我无法在工作中的loacl服务器上为您提供wordpress网站的链接。谢谢：）

<div class="container">
    <h1 class="title">Blog</h1>
        <div id="lazyload" class="grid_12">
            <?php
              $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
              $query_args = array(
                'post_type' => 'post',
                'posts_per_page' => 5,
                'paged' => $paged
              );
            ?>
              <?php if (have_posts()) { ?>
                <div class="page" id="p<?php echo $paged; ?>">
                <?php while (have_posts()) { the_post(); ?>
                  <article id="post-<?php the_ID(); ?>" <?php post_class('entry') ?>>
                    <header class="entryheader">
                      <h2 class="entrytitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    </header>
                    <div class="entrycontent">
                      <?php the_excerpt(); ?>
                    </div>
                  </article>
                <?php } ?>
                </div>
              <?php } ?>
            </div>
            <div id="spinner">
              <img src="<?php bloginfo('template_directory'); ?>/images/ajax-loader.gif" />
            </div>
            <script>
              jQuery(function(){
                var page = 2;
                var loadmore = 'on';
                jQuery(document).on('scroll resize', function() {
                  if (jQuery(window).scrollTop() + jQuery(window).height() + 60 > jQuery(document).height()) {
                    if (loadmore == 'on') {
                      loadmore = 'off';
                      jQuery('#spinner').css('visibility', 'visible');
                      jQuery('#lazyload').append(jQuery('<div class="page" id="p' + page + '">').load('/?paged=' + page + ' .page > *', function() {
                        page++;
                        loadmore = 'on';
                        jQuery('#spinner').css('visibility', 'hidden');
                      }));
                    }
                  }
                });
                jQuery( document ).ajaxComplete(function( event, xhr, options ) {
                  if (xhr.responseText.indexOf('class="page"') == -1) {
                    loadmore = 'off';
                  }
                });
              });
            </script>
</div>

Answer 1

要回答这个问题，我无法解决这个问题，但是，我找到了一个工作且易于使用的插件。它被称为YITH插件，您可以通过Wordpress插件https://en-gb.wordpress.org/plugins/yith-infinite-scrolling/下载它。感谢所有回复此帖的人！

Ajax Lazyload无法正常工作

1 个答案: