tsalesproductions / vtex-lazyload-v2

vtex lazy load

O que faz:

O projeto vtex lazy load foi criado para tornar possível trabalhar com lazy load em qualquer elemento dentro do ambiente VTEX legado.

Infos adicionais:

Atualmente, foi desenvolvido para funcionar em conjunto com o vanilla-lazyload, porém pode ser utilizado com outros lazy loads utilizando a chamada de callback.

Como usar:

É recomendado utilizar o noscript no elemento em que será usado, exemplo:

<section class="home__main-banner si-lazyload">
	<noscript>
		<vtex:contentPlaceHolder id="full banners" />
	</noscript>
</section>

<div class="shelf-image-container si-lazyload">
  <noscript>$product.GetImageTag(29)</noscript>
</div>

Parâmetros disponíveis:

Parâmetro	Descrição	Padrão
selector	O seletor CSS que especifica o elemento pai onde o lazy load será aplicado.	".si-lazyload"
element	O elemento HTML filho dentro do elemento pai especificado onde será buscado para decodificar.	"noscript"
file	Um objeto que contém informações sobre os alvos (imagens ou elementos) que serão aplicados o lazy load.
file.selector	O seletor CSS que especifica os alvos (imagens ou elementos) dentro do elemento filho onde o lazy load será aplicado.	"img"
file.attribute	O atributo que será substituído nos alvos pelos seus respectivos atributos de lazy load.	"data-src"
file.className	A classe CSS que será adicionada aos alvos para identificá-los como elementos de lazy load.	"lazy"
callback	Uma função de callback que será chamada para iniciar o lazy load após a configuração dos parâmetros nos elementos.	this.setLazyLoad

Objeto

{
  selector: ".si-lazyload", // onde o seletor se refere ao elemento pai
  element: "noscript", // o elemento filho que ele vai buscar para decodificar
  file: { 
    selector: "img", // alvos (imagens) que ele aplicará o lazy load
    attribute: "data-src", // atributo que será substituído
    className: "lazy" // classe de identificação do lazy load
  },
  callback: this.setLazyLoad // função de callback para iniciar o lazy load
}

Exemplos de uso:

Chamada básica

new vtexLazyLoad();

Chamada com parâmetros

new vtexLazyLoad({
      selector: ".si-lazyload",
      element: "noscript",
      file: {
        selector: "img",
        attribute: "data-src",
        className: "lazy"
      },
      callback: () => {
		//INICIAR SEU LAZYLOAD
	}
})

Chamada somente com callback

new vtexLazyLoad({
      callback: () => {
		//INICIAR SEU LAZYLOAD
	}
})

OBS: Caso instancie o callback(), o próprio da função será anulado. Só é recomendado caso queira implementar suas configurações de lazyload, ou utilizar outra opção de lazyload.

Chamada obtendo informações:

const lazy = new vtexLazyLoad();
console.log(lazy)

chamada com a função update() do vanilla-lazyload:

const lazy = new vtexLazyLoad();
lazy.lazyload.update();

CDN obrigatória caso queira usar com o vanilla-lazyload:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

---

MIT License