Load More items with ajax (button and scroll methods)

With The Grid, you can add a load more button in order to load more items in the grid with ajax.
You can set the number of items to load by clicking on the load more button and also adjust the delay between each new item appended in the grid.
If you want to use the load more button, you must add it in one of the available areas in the Layout tab.
In the load more button you also have the possibility to show the number of items that remain.

When On scroll option is activated, new items will be loaded when the end of the grid container will be reach on scroll.
If you put the load more button, it will be used to indicate that new items are currently loaded. Otherwise, a message will be shown at the bottom of the grid.

Preload items in the grid (images)

The Grid needs to wait that all images are correctly loaded before executing the rest of the script in order to correctly calculated item sizes (in masonry mode).
Because there is a delay between images finished loading, the grid will not looks like good during this delay.
In order to make the loading time more attractive, you can add a preloader animation until the images are loaded.

The Grid comes with more than 13 preloader css3 animations

At first you need to activate the preload option in order to get acces to the list of all preloaders.
Just select a preloader and directly get a live preview of it. You can adjust the size of the preloader animation and its color.

As for ajax loading, you can add a delay between each item when they appear in the grid.
If no delay is setup in Preloader item delay then all items will appear at the same time.