Lazy Loading

Lazy loading is a programming technique that delays loading resources until they are needed. A common example is a webpage that defers loading images until the user scrolls to their location within the page. Lazy loading is used on the web and in software programs, such as mobile and desktop applications.

Lazy Loading on the Web

Lazy loading images within a webpage can speed up the load time since the browser does not need to load images that are not visible. As the user scrolls through the page, the images are loaded dynamically. This is accomplished using JavaScript that detects the position of each image and determines if it is in the browser window's viewable area. If the user scrolls down to an image, the JavaScript will request the resource from the web server and display the image on the page. If the user does not scroll down, the image will not load.

It is possible to delay the loading of other resources, such as JavaScript files, CSS, and even the HTML itself. For example, a web developer might determine which CSS styles are needed for "above-the-fold" content on a webpage, or content viewable within the height of a typical browser window. The developer can implement these as "inline styles," or styles defined within the HTML of the webpage. JavaScript is used to load additional CSS after the page has loaded or once the user starts scrolling.

Lazy loading video is also popular on the web. It is especially effective since video files are typically the largest resources loaded within a webpage. Instead of sending the entire video to a client's device, the web server only sends small portions of the video while the user is watching it. Popular video sharing websites like YouTube and Vimeo use lazy loading to reduce bandwidth and to prevent users from downloading more video content than necessary. This is especially helpful for users with metered Internet connections, such as mobile data plans.

When lazy loading a video, it is common to load a few seconds or even several minutes ahead of the current point in the video. The video data is saved in a buffer, which helps videos play smoothly even when the Internet connection is not consistent.

Lazy Loading in Software Programs

While lazy loading has become increasingly popular on the web, it has been used in software development for a long time. For example, an operating system may only display thumbnail images for the visible icons in a folder. Similarly, an image viewing program may only load the visible images in a photo library. This uses less memory and improves application performance because the program does not load unnecessary data.

Updated January 28, 2019

Definitions by TechTerms.com

The definition of Lazy Loading on this page is an original TechTerms.com definition. If you would like to reference this page or cite this definition, you can use the green citation links above.

The goal of TechTerms.com is to explain computer terminology in a way that is easy to understand. We strive for simplicity and accuracy with every definition we publish. If you have feedback about the Lazy Loading definition or would like to suggest a new technical term, please contact us.

Want to learn more tech terms? Subscribe to the daily or weekly newsletter and get featured terms and quizzes delivered to your inbox.

Sign up for the free TechTerms Newsletter

How often would you like to receive an email?

You can unsubscribe or change your frequency setting at any time using the links available in each email.

Questions? Please contact us.