Simple Lazy Loading Images in Jquery with Fade In Effect

Abhigyan Singh 12th Jul 2020

This tutorial will explain about lazy loading image in jqury with fade in effect. This effect allows us to give special effect to our image while loading. When we need to load several images one by one. So loading images one by one is more effective then loading all images at a time.

Here when user scroll the cursor then image starts loading. When user down the cursor the image start loading with fade in effect. This effect is very useful for web application.

Explanation of Lazy Loading Images in Jquery

Here I am using Lazy Load plugin to give image Fad In effect. You can download this plugin directly to jQuery.Lazy() or You can download full demo example from my website.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="jquery.lazy.min.js"></script>

Just link this Javascript plugin to your desried page.

Your html page will be like this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="jquery.lazy.min.js"></script>

<style>
.lazy{border: 1px solid #ddd; border-radius: 17px; padding: 10px; margin:10px;}
</style>

<img class="lazy" data-src="1.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="2.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="3.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="4.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />

<img class="lazy" data-src="1.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="2.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="3.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="4.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />

<img class="lazy" data-src="1.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="2.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="3.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="4.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />

<img class="lazy" data-src="1.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="2.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="3.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="4.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />

<img class="lazy" data-src="1.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="2.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="3.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="4.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />

<img class="lazy" data-src="1.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="2.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="3.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />
<img class="lazy" data-src="4.jpg" border="0" alt="Lazy Image" height="300px" width="800px" />

There is a simple Javascript which enables fade in effect. You can make any other effct with fast and slow loading using this plugin.

<script type="text/javascript">
// javascript code
jQuery(document).ready(function() {
jQuery("img.lazy").lazy({
effect: "fadeIn",
effectTime: 2500 //In milliseconds
});
});
</script>

If you find any difficulties in implementing this code, feel free to write in comment section.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk