Baskerville Infinite Scroll: constant loading and flickering


I can’t get infinite scroll to work correctly with Jetpack and Baskerville theme.

Problem #1: Posts load as soon as you scroll the page. I have a trigger element (infinite-view) at the BOTTOM of the page. But the posts will start loading even when the element is not visible

Problem #2: When new posts load there is a flash of unstyled content with flickering all over the page. It looks like javascript is supposed to hide the new posts first and then fade-in the elements when the images are ready, but it’s not working. I don’t see any fade-in, even with lazy-load disabled.
Live example with all plugins disabled:

Interesting to note that when I open the console and look at the trigger element (infinite-view), I can see that as soon as I scroll the page, the element will blink just before new posts are loaded. I don’t understand what’s going on.

I have disabled all plugins except Jetpack and it didn’t change anything.


/* Add Infinite Scroll support to theme */

function baskerville_infinite_scroll_init() {
  add_theme_support( 'infinite-scroll', array(
    'type' => 'scroll',
    'container' => 'infinite-view',
    // 'footer' => 'true',
    'render' => 'baskerville_infinite_scroll_render',
    'wrapper' => false,
    'posts_per_page' => 10,
  ) );
add_action( 'init', 'baskerville_infinite_scroll_init' );

function baskerville_infinite_scroll_render() {
  while( have_posts() ) {
    echo '<div class="post-container">';
    $id = get_the_ID();
    $postClasses = "";
    foreach ( get_post_class() as $class ) {
      $postClasses .= $class . " ";
    echo '<div id="post-' . $id . '" class="' . $postClasses . '">';
    get_template_part( 'content', get_post_format() );
    echo '</div> <!-- /post -->';
    echo '</div>';

I added the infinite scroll in global.js:

Any hint to find what is causing this would be greatly appreciated

Jon87 2 years 2020-10-23T01:10:49-05:00 0 Answers 6 views 0

Leave an answer