Vtex Lazyload

A Lazysizes based plugin Lazyload for Vtex Components.

Instalation

$ npm install vtex-lazyload or download the file

<script type="text/javascript" src="/arquivos/vtex-lazyload.min.js"></script>

Usage

After import/call files on page, its initialize automatically

<!-- Vitrine -->
<div class="your-class js--lazyload has--lazyload" data-noscript="">
  <noscript>$product.GetImageTag(30)</noscript>
</div>

<!-- Placeholder -->
<div class="your-class js--lazyload has--lazyload" data-noscript="">
  <noscript><vtex:contentPlaceHolder id="Main-Banner" /></noscript>
</div>

Setting custom styles

You can use the following classes to custom style:

.is--lazyloaded { /* Uses when element is visible */ }
.has--lazyloading { /* Uses when element is loading */ }
.has--lazyerror { /* Uses when element has an error */ }

License

Vtex Lazyload and Lazysizes is open-sourced software licensed under the MIT license.

Credits

Lazyzises and all contributors!