LazyLoad 延迟加载(按需加载)-前端开发

LazyLoad 延迟加载（按需加载）是一种在页面加载时，只加载当前视窗内所需要的部分内容，避免不必要的资源浪费和页面加载时间过长的现象。这种技术在网站中的应用非常常见。

LazyLoad 延迟加载（按需加载）是一种在页面加载时，只加载当前视窗内所需要的部分内容，避免不必要的资源浪费和页面加载时间过长的现象。这种技术在网站中的应用非常常见。

实现方式

实现LazyLoad延迟加载的方式有多种，其中最常见的是使用JavaScript库。以下是一些常见的JavaScript库：
- Layzr.js：轻量级、易扩展和可定制，可用于图片和文本的延迟加载
- lozad.js：极简而快速的JavaScript库，可以延迟加载图像、视频、音频或iframe元素
- LazyLoad：使用内建可扩展API的高性能、小型JavaScript库，适用于多种元素的延迟加载。

实现流程

在使用现有库之前，应该了解延迟加载的基本原理和实现流程。下面以图片延迟加载为例，进行解释：

为需要延迟加载的图片添加占位符（例如一个占位符图形）。不要忘记将原始图片的URL保存在html标记中的一个特定属性中，通常是 data-src


<img src="https://via.placeholder.com/300x300" data-src="image.jpg">


加载完整页面后，使用JavaScript检测视窗内所有应该被延迟加载的图片。通常的方法是获取图片的位置和页面滚动位置，如果当前位置在可视窗口内，就将占位符替换为实际图片。否则，不需要进行图片加载

const images = document.querySelectorAll("img[data-src]");

const inViewport = (image) => {
    const rect = image.getBoundingClientRect();
    return (
        rect.top >= 0
        && rect.left >= 0
        && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
        && rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

const loadImage = (image) => {
    image.setAttribute("src", image.getAttribute("data-src"));
    image.onload = () => {
        image.removeAttribute("data-src");
        image.style.opacity = 1;
    };
};

const handleScroll = () => {
    images.forEach((image) => {
        if (inViewport(image)) {
            loadImage(image);
        }
    });
};

window.addEventListener("load", handleScroll);
window.addEventListener("scroll", handleScroll);

在上述JavaScript示例中，我们
- 首先获取页面中所有含有 data-src 属性的图片
- 接着实现了 inViewport() 方法，以检测图片是否在页面视窗内
- loadImage() 方法用于替换占位符
- 最后使用事件监听器来获取页面的滚动，以重新检查需要延迟加载的图片并加载图像
示例说明
接下来示例说明如何使用Layzr.js库实现延迟加载原图并预加载已缩放版本的图像。
<img src="placeholder/300x300.png" 
     data-src="original-image.jpg" 
     data-src-small="300x300-image.jpg"  
     class="lazyload">

上述示例中，我们使用一个 lazyload 类来标记图片，并使用 data-src 属性来存储原始图像的URL，使用 data-src-small 存储25％的缩放版本的URL。我们还添加了一个占位符，这里使用了一个矩形的PNG。
在使用Layzr.js时，我们只需要如下简单代码：
const layzr = new layzr();

//延迟加载待替换的所有占位符中的原图像
layzr.on("load", (image) => {
    //加载图片
    const src = image.getAttribute("data-src");
    image.setAttribute("src", src);
});

//预加载所有缩略图
document.addEventListener("DOMContentLoaded", () => {
    const images = document.querySelectorAll("[data-src-small]");
    images.forEach((img) => new Image().src = img.getAttribute("data-src-small"));
});

在上述JavaScript代码中，我们首先实例化了Layzr.js库，然后使用 on() 方法来监听 load 事件。在事件回调中，我们使用 setAttribute() 将实际图像的URL设置为图片的 src 属性。 load事件在图片加载完成后立即触发。
最后，我们在页面加载时使用 document.addEventListener() 方法预加载所有缩略图。这样可以更好地保证延迟加载原图像时用户不会看到闪烁的问题。
参考文献：
- Lazy Loading Images Using Intersection Observer API in JavaScript
- Lozad.js - A performant, lazy loading and multi-serving image observer
- CallMeCavs/Layzr.js

实现方式

实现流程

示例说明

基础教程推荐