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

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:LazyLoad 延迟加载(按需加载) - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JS设置获取cookies的方法

    当我们需要在网站或应用程序中储存数据时,Cookies 是一种常见的解决方案。通过在浏览器中创建 Cookies,我们可以方便地存储用户信息、在线购物车、偏好设置等等内容。在 JavaScript 中,设置和获取 Cookies 非常简单,下面是介绍如何设置和获取 Cookies 的攻略: 设置 Cookies 使用 JavaScript 设置 Cookie…

    JavaScript 2023年6月11日
    00
  • Web前端新人笔记之jquery入门心得(新手必看)

    来详细讲解一下“Web前端新人笔记之jquery入门心得(新手必看)”的完整攻略。 1. 前言 在介绍 jQuery 入门心得之前,需要先了解什么是 jQuery。jQuery 是一款快速、简洁的 JavaScript 库,是为了更简单地操作 HTML 文档、处理事件、实现动画效果和数据交互等功而开发的。jQuery 支持主流的浏览器,并且具有代码简洁、开发…

    JavaScript 2023年5月18日
    00
  • 一篇文章弄懂js中的typeof用法

    一篇文章弄懂 JS 中的 typeof 用法 typeof 是 JavaScript 中的一个关键字,用于确定一个值的数据类型。如今,在 JavaScript 中,由于一些语言习惯的原因,被称为“类型”或“类型操作符”。了解 typeof 的使用方法对于学习和理解 JavaScript 语言非常重要。 使用 typeof 的基本语法 语法:typeof op…

    JavaScript 2023年6月11日
    00
  • 原生js实现旋转木马效果

    实现旋转木马效果,可以分为如下几个步骤: 初始布局 在HTML中创建一个容器元素,然后在其中添加多个子元素,这些子元素将组成我们的木马效果。为了充分体现木马效果,这些子元素需要位置排列形成一个环。 样式与动画 为容器元素以及子元素定义样式,使其在页面中呈现出我们想要的样式和动画效果。通过CSS3中的转换、动画控制元素的旋转、移动、透明度等效果。在这里,我们需…

    JavaScript 2023年6月11日
    00
  • JS实现简易日历效果

    下面是详细讲解JS实现简易日历效果的完整攻略。 1.准备工作 在开始之前,我们需要准备以下工作: 一个HTML文件,用于展示日历 一个CSS文件,用于美化页面 一个JS文件,用于实现日历功能 2.HTML结构 我们需要在HTML中添加以下结构: <div class="calendar"> <div class=&quo…

    JavaScript 2023年5月27日
    00
  • Javascript中暂停功能的实现代码

    要实现Javascript中的暂停功能,可以采用以下几种方法: 方法一:使用setTimeout 使用setTimeout函数可以实现暂停功能,具体实现方式如下: function sleep(milliseconds) { return new Promise(resolve => setTimeout(resolve, milliseconds))…

    JavaScript 2023年6月10日
    00
  • JavaScript实现复选框全选功能

    JavaScript实现复选框全选功能的方法有很多,其中一种常用的方法是使用jQuery库的实现方式。下面我来详细讲解一下该方法的步骤。 步骤 1. 引入jQuery库文件 在HTML代码的头部引入jQuery库文件,例如: <script src="https://code.jquery.com/jquery-3.6.0.min.js&qu…

    JavaScript 2023年6月11日
    00
  • c#后台输出javascript语句示例程序

    针对“c#后台输出javascript语句示例程序”的完整攻略,我们可以按照以下步骤进行: 1. 建立ASP.NET网站 首先需要建立ASP.NET网站,可采用Visual Studio等工具进行开发。在新建Web Form时,记得选用ASP.NET Web Application类型。 2. 编写C#后台代码 在网站中,找到需要输出JavaScript语句…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部