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.

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.