vanilla-js-image-lazy-loader

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

Installation

npm i vanilla-js-image-lazy-loader Clone or Download all file in your lib(any folder)

How to use ?

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>

typescript/reactjs/angular based Code :
import {VanillaLazyImage} from 'vanilla-js-image-lazy-loader'; const name = new VanillaLazyImage();

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>