Press enter to see results or esc to cancel.


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











Comments

Leave a Comment