Fixing Layout and Spacing Issues caused by Image Lazy Loading

If you encounter layout or spacing issues when using images inside carousel-type blocks because of image lazy loading, you can disable the "Lazy Load Images within Carousels" setting in the Stackable Settings in your WordPress dashboard to fix the issue.

How Lazy Loading Works

If an image is lazy loaded, it means it will only load up when it goes in the viewport.

When images are not in a viewport yet, them being hidden can affect the layout of other elements on the page/screen. This is why sometimes when you have lazy loaded images, they get loaded as you scroll down the page. Sometimes, content gets shifted around a bit as the lazy loaded images start to load.

If your images are in a carousel, that would make the images on the non-visible slides of the carousel hidden. Because of that, there is a possibility that it can produce some visual issue like change the size of the carousel.

Usually, lazy loaded images inside carousels do not pose any issues but seldomly they might cause issues. It can be because of the theme styles, another plugin, a performance solution, the layout, or many more factors.

Although this is not a Stackable issue, Stackable has added this option in case someone needs it.