Very Strange “Load More” button behaviour on mobile

  • Resolved Lethalmiko

    (@lethalmiko)


    7 years, 11 months ago

    This great plugin exhibits bizarre behaviour on mobile. The “Load More Posts” button fails to display in category, archives and author pages but it shows on search results. I get this strange behaviour in Chrome, Opera and Samsung browsers on Android 4.3 kernel 3.0.31. On desktop or laptop, everything loads correctly on all pages.

    I tried clearing and disabling cache but nothing changes on mobile. But when I reduce the viewport on my laptop in Firefox and Chrome to get to mobile size, everything works properly. The code I use on the category page is:

    <?php if($wp_query->post_count >= 20) { echo do_shortcode('[ajax_load_more container_type="ul" css_classes="archive-list" post_type="post" sticky_posts="true" posts_per_page="20" category="' . $category_slug . '" offset="20" pause="true" scroll="false" button_label="Load More Posts" transition="fade" transition_speed="300" seo="true"]'); } ?>

    On search it is almost the same:

    <?php if($wp_query->post_count >= 20) { echo do_shortcode('[ajax_load_more container_type="ul" css_classes="archive-list" sticky_posts="true" posts_per_page="20" search="' . $_GET['s'] . '" orderby="relevance" offset="20" pause="true" scroll="false" button_label="Load More Posts" transition="fade" transition_speed="300" seo="true"]'); } ?>

    The code is similar for the other pages (archives and author). The website where all this is happening is:

    https://diggers.news/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Darren Cooney

    (@dcooney)

    Hi @lethalmiko,
    IT wouldn’t matter to Ajax Load More whether it was mobile or desktop. The same content would be displayed.

    Can you direct me to a particular section of your site so I can have a look?

    Thread Starter Lethalmiko

    (@lethalmiko)

    On a Galaxy Note 2 mobile phone in Chrome or Opera, the button does not load here: https://diggers.news/local/

    Or here: https://diggers.news/2017/04/

    But it loads here: https://diggers.news/?s=zambia

    On desktop and laptop, the button shows.

    I also tried on another (smaller) phone and same thing happened. Let me know what you experience on your mobile phone.

    Plugin Author Darren Cooney

    (@dcooney)

    The issue on https://diggers.news/2017/04/ and https://diggers.news/local/ is the ajax-load-more JS is not being loaded. It’s not the device or resoution.

    I’d take a look into how you are loading the content to determine why ajax-load-more js is not loading on these particular archive pages.

    Note that ALm requires jquery as a dependency. To remove this.
    https://connekthq.com/plugins/ajax-load-more/docs/filter-hooks/#alm_js_dependencies

    Cheers,

    Thread Starter Lethalmiko

    (@lethalmiko)

    Thanks for the tip, although what is confusing about your answer is that the button loads properly on desktop and laptop on all pages, including the ones I posted. If as you say the JS does not load on those pages, then why does button render correctly on higher resolutions except on mobile?

    Plugin Author Darren Cooney

    (@dcooney)

    Load more is not working on https://diggers.news/local/ or https://diggers.news/2017/04/

    Try clearing your WP Rocket cache.

    Thread Starter Lethalmiko

    (@lethalmiko)

    UPDATE: When I disabled WP Rocket, the button displayed correctly on mobile. Further investigation revealed that it is the mobile cache setting on WP Rocket which was causing the problem. When I unchecked the Mobile cache setting, the button works fine.

    But I now have a new problem because WP Rocket strongly recommends using the Mobile cache if you are using one of these plugins: WP Touch (Free Version), wiziApp, WordPress Mobile Pack, WP-Mobilizer, WP Mobile Edition, Device Theme Switcher, WP Mobile Detect, and Easy Social Share Buttons.

    I use Easy Social Share Buttons and after testing the site in tools.pingdom.com, it has become slower after disabling mobile cache. It used to load in 1.6 seconds but is now up to between 2 and 3 seconds.

    Is there a way to make your plugin work even when Mobile cache is enabled in WP Rocket?

    Plugin Author Darren Cooney

    (@dcooney)

    Honestly I’m not. I really don’t know why Mobile Cache would stop the infinite scroll from working.

    Can you confirm infinite scroll DOES NOT work when you enable Mobile cache?
    Because even when I view your site on desktop it is not working.

    ****

    From the WP Rocket docs.

    Why is mobile caching deactivated by default?

    WP Rocket is built with your sanity in mind. We want our users to enable our plugin and benefit from an immediate performance boost. Any feature enabled automatically in WP Rocket must be 100% functional by default.

    Features like file optimization or LazyLoad, as well as serving cached files to mobile devices require human eyes and scrutiny in order to ensure they work as they should. Their functionality heavily depends on what kind of theme and other plugins are present in a WordPress installation—factors WP Rocket can detect but little about. Hence we designed these options as opt-in.

    I’m not sure if this means it won’t work with mobile cache or it will ˉ\_(ツ)_/ˉ

    Thread Starter Lethalmiko

    (@lethalmiko)

    The infinite scroll works on every device I tested it with mobile caching off. There is a big red button at the bottom of any listing of posts labeled “Load More Posts” and it works normally when you click on it. It is also on the page you have linked to. I can send you a screenshot if you email me on admin [at] diggers [dot] news.

    The WP Rocket plugin authors say that anything not activated may not work and yet they strongly recommend mobile caching when using certain plugins. To quote from the mobile cache settings page:

    “Warning: If you are using one of these plugins, you must activate this option: WP Touch (Free Version), wiziApp, WordPress Mobile Pack, WP-Mobilizer, WP Mobile Edition, Device Theme Switcher, WP Mobile Detect, and Easy Social Share Buttons.”

    It seems that the process of caching for mobile somehow interferes with your plugin. Anyhow, maybe the best is to reach out to the WP Rocket plugin authors and tell them about this problem. I really like both plugins and want to keep them but I don’t want to be forced to choose between a fast user experience and speed of loading. I already have enough problems with incompatibility issues with other plugins!!!

    Plugin Author Darren Cooney

    (@dcooney)

    Yea sounds like you can’t use Mobile Cache.

    I need to get a copy of WP rocket to test this.

    Should be noted that the issue with Load More not working has nothing to do with Easy Share. Those are separate issues.

    Thread Starter Lethalmiko

    (@lethalmiko)

    Email me I send you a copy of the plugin. Easy Social Share needs caching because it is a rather heavy plugin but I like its great features.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Very Strange “Load More” button behaviour on mobile’ is closed to new replies.