Implementation of Lazy Loading – Ranjith V

Designing An Oozie Workflow – Gayathri R
April 16, 2018
Offline Sync in Mobile Applications – Kiruthika P
April 17, 2018

Implementation of Lazy Loading – Ranjith V

Lazy loading, also known as Dynamic Function Loading, is the opposite of eager loading. Lazy loading is the delay in loading web content like images and files in the web pages. Using lazy load, web pages with large files and images can be loaded faster by reducing the server loading time to retrieve the website or web application.

Why do we need lazy loading?

As the web page loads, all the default components like images and data, start loading simultaneously. This consumes more time as the data needs to be fetched from the server. Then we see error messages like ‘website is down’ or ‘server is busy’. The action may be such that it consumes time and resources to acquire the content, such as a database query, a web service request or some complex process.

How does it work?

To overcome this scenario, I implemented lazy loading. Lazy loading can be used to improve the performance of an application, provided most of the files and images are rarely used. Based on the request or response for components like images, etc. from the user, these large data are retrieved from the database, which reduces the response time and does not affect the loading of the web application or website. A developer has the authority to enable or disable lazy loading in the website or the web based applications.

Implementation options for lazy loading:

Lazy Loading can be implemented in many ways. Some of the common and simplest ways to implement it are:

  • Lazy Initialisation: We initialise some of the functions in the coding page. These do not load on the startup of the application but load on placing a request using the function name when it is required. This enables the application to load faster.
  • Spirit (Ghost): When the web application loads, only the identification number of the file or image loads and when the user requires a particular data to be obtained, the ID number is used to avoid error messages or delay in loading.
  • Value Holder: This is implemented with the help of an object that manages the delayed load and the retrieval of data when required.
  • Using J Query: By alerting tag names of the content and adding a J Query plug-in, we can control the loading of an image in the web browser.

Here’s a real time example of implementing lazy loading in asp.net web application with SQL server as database.

Binding Data:

The Data is fetched from the SQL server and bound into the grid view.

Lazy Loading:

  • Add an ASP.Net Timer Control, an Update Panel and a Script Manager to the web application or the data binding grid. To implement lazy loading, Ajax controls and timer are required.
  • The ASP.Net Timer Control is enabled and the timer is set to 2 seconds. Now add ‘On Tick’ event in the coding page, so when the web page is requested, it loads only the default content without loading the large file.
  • Create a separate function for file stream or the image files inside the coding page.
  • The ‘On Tick’ event is triggered by calling the function load File stream method so that large files will load independently and not affect the loading of the web page.

That’s how it’s done!

Therefore, when you retrieve large files or data from the server and the rendering time is more, you can use lazy loading to minimize the response time.

Keywords: Lazy loading, web application, how to, delayed loading, eager loading, article, slow web page, error in loading, web page

Lazy loading, also known as Dynamic Function Loading, is the opposite of eager loading. Lazy loading is the delay in loading web content like images and files in the web pages. Using lazy load, web pages with large files and images can be loaded faster by reducing the server loading time to retrieve the website or web application.

Leave a Reply

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