How to Preload Images from Static Content

Magento 2 Lazy Load extension has a built-in feature that allows you to preload the most important images first. These images will be given the highest priority and will ignore size restrictions. This functionality is useful when creating complicated HTML markups, and the extension automatically preloads the wrong images.

In order to preload a specific image, add a data-hero attribute in the following way:

<img data-hero src="banner.png" alt="Sale banner">

If you want to preload images only on specific devices, add a data-media attribute with a media query:

<img data-hero data-media="(min-width: 768px)" src="banner.png" alt="Sale banner">
Was this article helpful?