LazyLoad non-reactJS

A lazyload for be use with websites.

Demo

Instalation

<script defer="defer" src="./auto-lazyload-min.js"></script>

Usage

After import/call files on page, its initialize automatically.

→ When front-end can't change html, most used with Vtex

<div class="your-class has--lazyload">
	<noscript>html from back-end here</noscript>
</div>

→ Images

<img class="lazy-loading" data-src="IMAGE_URL" src="data:image/gif;base64,R0lGODlhAQABAIAAAOvr6wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==">

→ Backgroung images

<div class="your-class lazy-loading lazy-bg" data-bg="IMAGE_URL"></div>

→ Iframe

<div class="your-class has--lazyload">
	<noscript><iframe src="IFRAME_URL"></iframe></noscript>
</div>

or

<iframe class="lazy-loading" data-src="IFRAME_URL" src="data:text/plain;charset=UTF-8,Loading..."></iframe>

You can use the following classes on image tag <img class="lazy-"> to custom style:

iframe[class*="lazy-"] {
	background: #ebebeb;
}
img[class*="lazy-"][src*="data:image/gif;"] {
	opacity: .1;
	transition: none;
}
img[class*="lazy-"] {
	opacity: .1;
	transition: opacity .3s ease-out;
}
img[class*="lazy-"].lazy-loaded {
	opacity: 1;
}

If you do need to execute again after insert some image or iframe:

autoLazyload.mount()
autoLazyload.run()

/* or this to mount and execute after mount */

autoLazyload.mount(1000) /* dalay in ms */

/* also function run with dalay */

autoLazyload.run(1000) /* dalay in ms */

You can change default delay, look at the end of self executing function

...(0); /* dalay in ms */

License

Auto Lazyload is open-sourced software licensed under MIT license.

Made with ♥