Boost Efficiency with Smart Loading
Configure Inline Loading and Lazy Loading in your Grid
Table of Contents
Load More and Lazy Load
Essential Grid provides two smart loading methods that help you load your grid items in the most efficient possible way: the Load More functionality, and Lazy Loading.
Both are found in the Smart Loading panel, which is second from the bottom under the Grid Settings tab:
Let’s see how you can put them both to use.
The Load More functionality in Essential Grid allows you to progressively load additional grid items inline, with new items added to the bottom of the grid.
Note: You can only use this functionality if pagination is disabled.
Load More Option
If you decide to use the Load More functionality, choose either More Button or Infinite Scroll from the Load More dropdown list:
Choose More Button if you would like visitors to have to manually click a button in order to load the next set of grid items:
Choose Infinite Scroll if you would like content to continuously load as the visitor moves down the page.
Hide Load More Button
If you are using the infinite scroll method you might not want to have a load more button showing. If so, set the Hide Load More Button to On.
Load More Text
Use the Load More Text option to decide what text a visitor should see the bottom of the grid.
Loading Error Message
If you would like to add a fallback message, just in case of any error loading content, add the message you would like to use in the Loading Error Message field:
Item No. Remaining
If you would like the load more button to display the number of grid items yet remaining to load, set the Item No. Remaining option to On:
Item No. at Start
Use the Item No. at Start option to configure how many grid items should be showing when the page is first loaded.
Item No. Added
Use the Item No. Added option to configure how many grid items should be added on each round of loading.
Lazy loading is a method of handling media that makes websites more efficient by waiting to load content until just before it is needed.
This ensures the content a visitor gets to first is ready earliest, without them needing to wait for the rest of the site to load.
To enable lazy loading for your grid items set the Lazy Load option to On:
Lazy Load Blurred Image
If the Lazy Load Blurred Image option is set to On, then a placeholder blurred image will appear in your grid until the full Item is loaded:
Lazy Load Color
You can use the Lazy Load Color option to set the background behind an item while it is in the process of loading:
In the Next Section: Navigation, Filtering and Sorting
That wraps up our manual section covering everything to do with the Grid Settings tab.
In the upcoming section we’ll move on to the next tab, Nav-Filter-Sort, and learn about all of the ways you can configure navigation, filtering and sorting in Essential Grid.