关键词

LazyLoad 延迟加载(按需加载)

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

实现方式

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

实现流程

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

  1. 为需要延迟加载的图片添加占位符(例如一个占位符图形)。不要忘记将原始图片的URL保存在html标记中的一个特定属性中,通常是 data-src
<img src="https://via.placeholder.com/300x300" data-src="image.jpg">
  1. 加载完整页面后,使用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

本文链接:http://task.lmcjl.com/news/8262.html

展开阅读全文