Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

vanilla-js-image-lazy-loader

1.0.6 • Public • Published

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


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>

Install

npm i vanilla-js-image-lazy-loader

DownloadsWeekly Downloads

0

Version

1.0.6

License

MIT

Unpacked Size

17.6 kB

Total Files

8

Last publish

Collaborators

  • avatar