Lazy Loading Comments

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

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.

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.

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.