vanilla-js-image-lazy-loader
v1.0.7
Published
image lazy loader based on vanilla-js programming.
Downloads
31
Maintainers
Readme
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>