Lazy Loading (0): Overview

Note: this article was originally written on 05/29/2024, and is published on 01/24/2025.

In this series of articles, we discuss Lazy Loading and related. There is no Lazy Loading Category on this site; we put the articles in the LINQ category because the behavior of Lazy Loading is based on or related to LINQ.

Lazy Loading (0): Overview --- this article
Lazy Loading (1): Difference Between IEnumerable and IQueryable
Lazy Loading (2): HTML
Lazy Loading (3): JavaScript
Lazy Loading (4): EntityFramework
Lazy Loading (5): Angular --- not done

A - Introduction

Lazy loading (also known as asynchronous loading) is a technique used in computer programming, especially web design and web development, to defer initialization of an object until it is needed. It can contribute to efficiency in the program's operation if properly and appropriately used. This makes it ideal in use cases where network content is accessed and initialization times are to be kept at a minimum, such as in the case of web pages. For example, deferring loading of images on a web page until they are needed for viewing can make the initial display of the web page faster. The opposite of lazy loading is eager loading.

Note: The part above were written on 05/31/2024, but not finished and not published. The following is completed on 01/24/2025, in fact, by AI,

B - Examples of Lazy Loading

This part is still from AI, Copilot | Microsoft 365 Copilot

1. Lazy Loading Images

You can use the loading attribute on <img> tags to defer loading images until they are needed. For example:

<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

This will load the image only when it comes into the viewport

2. Lazy Loading Iframes

Similarly, you can lazy load iframes using the loading attribute:

<iframe src="video.html" loading="lazy"></iframe>

This will defer loading the iframe content until it is visible on the screen

3. Lazy Loading with JavaScript

You can also use JavaScript to implement lazy loading. One common approach is to use the Intersection Observer API:

document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });
        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    }
});

This script will load images with the class lazy only when they enter the viewport

4. Lazy Loading CSS Background Images

You can lazy load background images using JavaScript as well:

document.addEventListener("DOMContentLoaded", function() {
    let lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));
    if ("IntersectionObserver" in window) {
        let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add("visible");
                    lazyBackgroundObserver.unobserve(entry.target);
                }
            });
        });
        lazyBackgrounds.forEach(function(lazyBackground) {
            lazyBackgroundObserver.observe(lazyBackground);
        });
    }
});

In your CSS, you can define the visible class to load the background image:

.lazy-background {
    background-image: none;
}
.lazy-background.visible {
    background-image: url('background.jpg');
}

This will load the background image only when the element becomes visible