JQuery Lazy Load with fadeIn effect

Last updated on Aug 02, 2016

Alphanso Tech

jQuery / JS


JQuery Lazy Load with fadeIn effect

In Web designing ,Lazy loading is mode that allows developers to specify that what components of data should not be loaded into DOM by default,when the DOM is loaded initially .jQuery lazy load enables these kinds of functionality over the DOM.

Lazy loading, also known as dynamic function loading .Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed.

Let’s understand more effectively by taking an example of facebook, 

When we login to facebook, Initially all posts are not loaded,only few posts has been loaded.While we starts to navigate and scroll down to view more posts, an event is fired on scroll-end ,which  takes more posts from database and pushes them to DOM.The event will again fire on next scroll-end,ant repeats until the data will not over.This is what exactly Lazy-Loading.

The advantages of Lazy-Loading is ,It is a fast, feature-rich, extensible and lightweight delayed content loading plugin for jQuery. It’s designed to speed up page loading times and decrease traffic to your customers and users by only loading the content in view.

If there is a large numbers of data ,it is better to bring a limited numbers of data in place of all,it increases the speed of web pages and performance.

Consider a basic example of Lazy-Loading ,which will give you the basic perception of lazy-loading and how it works.

When the page is called , following images are loaded initially, by default.Remaining Images will be loaded on scroll-end event.

In above code ,Initially some images have been loaded by default,we will load more images on scroll-end event.To do this, first of all we need to define scroll position.

Basic introduction of used functions :

.scrollTop() :The scrollTop() method sets or returns the vertical scrollbar position.
.height() :   Get the current computed height.

$(window).scrollTop() : Returns the position of the top of the page.

$(window).height() : Returns height of browser viewport.

$(document).height() : Returns height of HTML document.

Now ,Consider the following code

Initially $(window).scrollTop() = 0, $(window).height()  is fixed based on particular screen resolution,suppose it is 500.$(document).height() is also fixed initially i.e 17012.
Now while your start to scrolling down $(window).scrollTop() increasing sequentially(200,400,600 …),
while it will become 900 then  

elements will be added to DOM, and the height of document will increase automatically and vice versa.


jQuery Lazy Loading with fading effect

We have learnt ,that how to push the elements to DOM on scroll download event,but the element which are pushed do not have any animation effect.

To make them more attractive and interactive we have added jQuery .fadeIn() Effect.The slight difference in jQuery code given below.

we have already code, make changes in it,we were appending entire portion div and image together to DOM.but here first we have appended <div> first and then in it we have appended the image,it means first out div is pushed to DOM and then the image is pushed to previously pushed <div> based on pushed <div> selector (id).

To generate unique  id for every <div> we have used guid() custom created function.


[sociallocker]Download the complete source code[/sociallocker]


I hope you will find this post very useful regarding jQuery Lazy Load. Let me know any questions if you have in comment regarding jQuery. I will reply you ASAP.

Have you got cool idea about Web Application development or WordPress Development? Contact us Now to get free consultation on your idea. Alphanso Tech is rated as one of the best Web Development Company in India.







Post by Alphanso Tech

Created in 2009, Alphanso Tech is a leading IT Consulting company with a presence in the USA, Canada, and India.We are a trusted and leading service provider to many top-tier companies in the area of Custom WordPress Development , Web Application Development , iOS App Development , Outsourcing Services, Online Marketing and many other related activities.

Leave a Reply

Your email address will not be published. Required fields are marked *