vanilla js based image-lazy-loader
This library for loading images as lazy
And this library based on Vanilla JS and built from typescript
So, there is advantage you can use with javascript, AngularJS-1, Angular2 (or above),ReactJs, VueJs and more
Please see in the EXAMPLE / DEMO
<h3>Installation</h3>
npm i vanilla-js-image-lazy-loader
Clone or Download all file in your lib(any folder)
<h3>How to use ?</h3>
HTML Code :
<div class="blog">
<a href="static/frontend/blog-detail.html" class="block3-img dis-block hov-img-zoom">
<img class="img-fluid lazy" data-src="https://picsum.photos/seed/picsum/400/300?123489879" alt="IMG-BLOG">
</a><br/>
<a href="static/frontend/blog-detail.html" class="block3-img dis-block hov-img-zoom">
<img class="img-fluid lazy" data-src="https://picsum.photos/seed/picsum/400/300?123489879" alt="IMG-BLOG">
</a><br/>
<a href="static/frontend/blog-detail.html" class="block3-img dis-block hov-img-zoom">
<img class="img-fluid lazy" data-src="https://picsum.photos/seed/picsum/400/300?123489879" alt="IMG-BLOG">
</a><br/>
....
</div> </code>
typescript/reactjs/angular based Code :
import {VanillaLazyImage} from 'vanilla-js-image-lazy-loader';
OR Core javascript code
<script src="dist/image-lazy-loader-vanilla.js"></script>
<script>
new VanillaLazyImage(".blog img.lazy").applyLazyLoader();
// OR
var vanillaLazyImageObj = new VanillaLazyImage();
vanillaLazyImageObj.selectorName=".blog img.lazy";
vanillaLazyImageObj.applyLazyLoader();
<script> </code>