You are browsing the latest version of the documentation which is not released yet. See the current stable version instead.

Lazyload

Lazyload for images and iframes are implemented with Minilazyload library.

All images are lazy loaded by default. Default selector for lazyload is [loading=lazy]. Supported browsers use native lazy load. Browsers without native image lazy load support rely on the Minilazyload library and a placeholder image is rendered in a src attribute to prevent an actual image from loading until necessary.

Disable lazyload

Lazyload might be disabled or enabled globally by defining parameter shopsys.image.enable_lazy_load in parameters_common.yaml

Slick component is used as homepage slider for cycling through images. We don't want to use lazy loading for these images. Slick has own lazyload function. We can disable minilazyload function by setting attribute lazy: false in img tag.

{{ image(item, { lazy: false }) }}