LogoLogo
Ajaxify HomeWP.org RepoDLX Plugins
Ajaxify Comments
Ajaxify Comments
  • 👋Welcome to Ajaxify Comments
  • First Time Users
    • Installing the Plugin
    • Finding the Settings
    • Getting Started
    • Menu Helper
  • 🖌️Customization
    • Labels and Translations
    • Appearance Settings
  • 🤓Advanced Topics
    • Callbacks
    • Disable Scroll to Posted Comment (Anchor)
    • Disable URL Updating
    • Lazy Loading Comments
    • Selectors
    • WPML and Translations
  • Developers
    • Script Debugging
    • Actions and Filters
      • Changing Labels Programmatically
    • GitHub Repo
    • Changelog
  • Theme Integrations
    • Ollie
    • Twenty Twenty-Three
  • Plugin Integrations
    • Confetti
    • Comment Edit Core
  • Quick Links
    • Ajaxify Home
    • Support
    • GitHub Repo
    • WordPress.org Plugin Page
Powered by GitBook
LogoLogo

Download

  • GitHub
  • WP.org Repo

Support

  • WP.org Support
  • DLX Support
  • Contact

DLX Plugins

On this page
  • Prerequisite: Please set your selectors first
  • Enabling Lazy Loading
  • Testing Lazy Loading
  • Setting the Triggers
  • Setting the Loading Settings and Messages

Was this helpful?

Export as PDF
  1. Advanced Topics

Lazy Loading Comments

Lazy loading comments can improve performance

PreviousDisable URL UpdatingNextSelectors

Last updated 1 year ago

Was this helpful?

Lazy-loading comments can improve the page load of your blog posts and pages. If there are a lot of comments on a post, this can slow down the page's loading speed.

Prerequisite: Please set your selectors first

Make sure you set your selectors first. You can use Menu Helper to help set your selectors.

Enabling Lazy Loading

Find the Lazy Load options in the admin settings. The first option on the page allows you to enable or disable lazy loading for comments.

Testing Lazy Loading

You can use Menu Helper to simulate lazy loading before it's activated.

Setting the Triggers

Here are the types of Triggers and what you can do for each one.

External Trigger

Comments do not load unless specifically invoked by an external source.

The external source will want to call this JavaScript function to load in the comments:

WPAC.RefreshComments();

Comments Scrolled Into Viewport

This option allows Ajaxify Comments to load when the comments section has been reached. This will be useful for never loading the comments for the user until that user reaches further down the page in the comments section.

You can adjust a vertical scroll offset (in pixels) to "trigger" loading a certain distance above the comments section.

Dom Ready (Default)

This will load comments once the page has finished loading. This is the default behavior.

Dom Element Reached

This option allows you to set which HTML element or CSS selector must be scrolled into view in order to load comments.

Use a valid CSS selector using jQuery notation (.css-class,#css-id,form)

For example, if you set a selector to some Related Posts at the bottom of your content, the comments will load in when the posts are scrolled into view.

You can set the scroll offset so that the loading occurs a certain number of pixels above the offset.

Units are in pixels: Scroll offset is in pixels.

Scroll Distance Trigger

You can set the loading trigger to be scroll distance. This will load the comments when a user reaches a certain number of pixels from the top of the screen.

Setting the Loading Settings and Messages

You can choose between an overlay or no overlay for lazy loading. An animation of the loading popover is below.

The Overlay can be configured in the Appearance settings.

🤓
Selectors
Menu Helper
Finding the Settings
Menu Helper
Appearance Settings
Lazy Loading Admin Options
Enable Lazy Loading Option
Simulate Lazy Loading Enabled or Disabled
The Types of Lazy Load Triggers
Comments Scrolled Into Viewport Option
Dom Ready Option
Dom Element Reached
Load Comments a Number of Pixels from the Top
Overlay Options
Lazy Loading Overlay