Jinu in HTML, Javascript
How to load images dynamically (or lazily) when users scrolls them into view
In this video I have shown how to load images lazily when user scrolls into the view of page.
This is the basic method all online shopping websites are using.
Source Code.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload.js"></script>
<script>
window.addEventListener("load", function(event) {
lazyload();
});
</script>
</head>
<body>
<img class="lazyload" src="load.gif" data-src="img/1.jpg" width="765" height="574" />
<img class="lazyload" src="load.gif" data-src="img/2.jpg" width="765" height="574" />
<img class="lazyload" src="load.gif" data-src="img/3.jpg" width="765" height="574" />
<img class="lazyload" src="load.gif" data-src="img/4.jpg" width="765" height="574" />
<img class="lazyload" src="load.gif" data-src="img/5.jpg" width="765" height="574" />
<img class="lazyload" src="load.gif" data-src="img/6.jpg" width="765" height="574" />
<img class="lazyload" src="load.gif" data-src="img/7.jpg" width="765" height="574" />
<img class="lazyload" src="load.gif" data-src="img/8.jpg" width="765" height="574" />
<img class="lazyload" src="load.gif" data-src="img/9.jpg" width="765" height="574" />
<img class="lazyload" src="load.gif" data-src="img/10.jpg" width="765" height="574" />
</body>
</html>
Download the Project below.
Download the complete project here.lazyload.rar
Preview
0 Comments
Comments
Leave a Comment