lazyload.js 懒惰加载框架下载及使用

 

🖥 lazyload.js 懒加载框架下载及使用指南

一、概述

  • LazyLoad.js 是一款轻量级 JavaScript 图片懒加载库。
  • 作用：页面初次加载只渲染可视区域的图片，滚动到图片位置时再加载，提升页面性能和加载速度。
  • 官方仓库（GitHub）：https://github.com/verlok/lazyload

二、下载方式

1. 使用 npm 安装

npm install vanilla-lazyload
php
28 Bytes
© 菜鸟-创作你的创作

2. 直接引入 CDN

<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.6.1/dist/lazyload.min.js"></script>
php
97 Bytes
© 菜鸟-创作你的创作

3. GitHub 下载

三、HTML 图片设置

  • 图片 src 使用占位图或空值，真实图片地址放在 data-src 属性中：
<img class="lazy" data-src="example.jpg" alt="示例图片" width="300" height="200">
php
77 Bytes
© 菜鸟-创作你的创作

四、JavaScript 初始化

// 初始化 LazyLoad
var lazyLoadInstance = new LazyLoad({
    elements_selector: ".lazy",   // 懒加载图片选择器
    threshold: 300,               // 距离可视区多少像素开始加载
    effect: "fadeIn",             // 加载效果
    callback_enter: function(element) {
        console.log("图片进入可视区: ", element);
    }
});
php
285 Bytes
© 菜鸟-创作你的创作

常用配置参数

参数说明
elements_selector选择懒加载的元素
threshold提前加载的距离（单位 px）
effect图片加载显示效果，如 fadeIn
callback_enter元素进入可视区回调
callback_load图片加载完成回调
callback_error图片加载失败回调

五、动态内容懒加载

  • 对于动态插入的图片，需要手动更新：
lazyLoadInstance.update();
php
26 Bytes
© 菜鸟-创作你的创作

六、示例完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>LazyLoad 示例</title>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.6.1/dist/lazyload.min.js"></script>
<style>
  img { display: block; margin: 20px auto; width: 300px; height: 200px; }
</style>
</head>
<body>
<img class="lazy" data-src="img1.jpg" alt="示例1">
<img class="lazy" data-src="img2.jpg" alt="示例2">
<img class="lazy" data-src="img3.jpg" alt="示例3">
<script>
var lazyLoadInstance = new LazyLoad({
    elements_selector: ".lazy",
    threshold: 200,
    effect: "fadeIn",
    callback_load: function(element) {
        console.log("图片加载完成: ", element);
    }
});
</script>
</body>
</html>
php
684 Bytes
© 菜鸟-创作你的创作

💡 优化建议

  1. 为图片设置宽高，防止页面重排（CLS 问题）。
  2. 对长列表图片可配合分页或无限滚动，提升性能。
  3. 对大图可使用 srcset 配合 LazyLoad，实现响应式加载。

评论

发表评论

此博客中的热门博文

Flink SQL 详解：流批一体处理的强大工具

  Flink 是一个开源的分布式流处理框架，广泛用于实时数据处理，尤其是在大数据领域。Flink 提供了一个非常强大的 SQL 组件 ——   Flink SQL ，它可以通过类似于传统关系型数据库的 SQL 查询语言对数据流和批数据进行处理，实现流批一体的处理。本文将详细解析   Flink SQL   的特点和如何利用它实现流批一体的处理。 一、Flink SQL 的背景 在传统的数据处理架构中，数据分为两类： 批处理 ：一次性地处理一大批数据，通常是在一个固定时间窗口内进行数据处理。 流处理 ：实时地处理数据流，数据一到就处理，并且可以处理无限量的数据。 在早期，大多数数据处理框架，如 Apache Hadoop，通常只能处理批数据。而 Apache Kafka、Apache Flink 等流处理框架，则主要用于流数据处理。随着数据处理需求的多样化，流和批的混合处理逐渐成为一个热门需求。 Flink SQL 提供了一种统一的方式来处理流和批数据，它支持   流批一体   的处理模型，即在一个 SQL 查询中同时处理流数据和批数据，简化了开发和运维的复杂度。 二、Flink SQL 主要特点 统一的流批处理 ： Flink SQL 可以在同一个 SQL 查询中同时处理流数据和批数据，使用相同的 SQL 语法，简化了流批场景下的开发和维护工作。 高性能和低延迟 ： Flink 提供了低延迟的数据处理，适合实时流处理场景。通过优化执行计划和对大规模数据集的支持，它能够高效地进行实时数据分析。 丰富的数据源和接收器支持 ： Flink SQL 支持多种数据源（如 Kafka、HDFS、JDBC、文件系统等）和数据接收器（如 Kafka、Elasticsearch、JDBC 等），使得与不同数据源的集成变得简单。 SQL 标准兼容性 ： Flink SQL 提供了 SQL99 标准的大部分功能，并且不断增强对更复杂 SQL 语法的支持，如窗口函数、聚合函数等，能满足大部分传统数据处理需求。 强大的扩展性 ： Flink SQL 可以与 Flink 流处理引擎和批处理引擎无缝集成，支持复杂的流批操作和多阶段查询。 流批语义的一致性 ： Flink SQL 提供了   流语义   和 ...
阅读全文

利用ArcScene制作三维图

  ArcScene  是  ArcGIS  中用于三维数据可视化的工具。它允许用户创建、分析、展示和共享三维空间数据，支持导入 DEM（数字高程模型）、TIN（不规则三角网）、3D 建筑物等数据，并能够实现三维地形、城市建模等应用。 下面是利用  ArcScene  制作三维图的基本步骤： 1.  准备数据 要制作三维图，首先需要准备适合的三维数据。可以使用以下几种数据格式： DEM （数字高程模型）：用于表示地表高程。 TIN （不规则三角网）：用于表示地表的复杂形态。 3D 建筑物模型 ：可以是  CityGML 、 Collada (.dae)  等格式。 点云数据 （如激光雷达点云）：用于表示地面、建筑物等的三维点数据。 2.  启动 ArcScene 打开  ArcGIS Desktop ，然后启动  ArcScene （可以在  ArcMap  中通过点击工具栏的  ArcScene  图标启动，也可以直接从开始菜单中启动）。 ArcScene  会以三维视图启动，默认显示的是一个空白场景。 3.  导入数据 3.1  导入 DEM 数据 点击菜单中的  Add Data  按钮，选择  Add Data 。 浏览并选择你的  DEM 文件 （.tif 或其他格式）。 将 DEM 文件加载到 ArcScene 中。 导入 DEM 后，它将自动显示为三维表面，ArcScene 会根据 DEM 文件中的高度数据，自动为其创建一个 3D 地形。 3.2  导入 3D 建筑物数据 点击  Add Data  按钮，选择你的 3D 建筑物模型数据（如  CityGML 、 Collada .dae  文件等）。 加载数据后，建筑物将会以三维形式显示在场景中。 4.  调整三维视图 4.1  调整视角 使用鼠标左键单击并拖动可以旋转视角。 使用鼠标滚轮可以放大或缩小视图。 按住  Ctrl  键并拖动鼠标可以平移视图。 4.2  调整地面高度...
阅读全文

decode函数

  在 Python 中， decode()  是字符串或字节序列的方法，通常用于将字节数据（ bytes ）转换成字符串（ str ）类型。具体来说，它的作用是将字节序列按照指定的字符编码格式解码为字符串。 decode()  函数一般应用于  字节串（ bytes ）到字符串（ str ）的转换 ，用于处理来自文件、网络或其他外部数据源的二进制数据。 1.  decode()  方法的基本语法 bytes. decode ( encoding= "utf-8" , errors= "strict" ) php 47 Bytes © 菜鸟-创作你的创作 encoding ：指定解码所使用的字符编码，默认是  utf-8 。常见的编码包括  utf-8 、 ascii 、 utf-16  等。 errors ：指定解码时遇到错误时的处理方式。常用的选项有： "strict" （默认）：遇到无法解码的字节会抛出  UnicodeDecodeError  异常。 "ignore" ：忽略无法解码的字节。 "replace" ：用默认字符替换无法解码的字节。 2. 示例：解码字节串 2.1 使用默认编码（ utf-8 ）解码 # 字节串 byte_data = b 'hello world' # 解码成字符串 str_data = byte_data. decode ( 'utf-8' ) print ( str_data ) # 输出: hello world php 115 Bytes © 菜鸟-创作你的创作 2.2 使用其他编码格式解码 # 字节串 byte_data = b 'hello world' # 使用 ASCII 编码进行解码 str_data = byte_data. decode ( 'ascii' ) print ( str_data ) # 输出: hello world php 124 Bytes © 菜鸟-创作你的创作 2.3 解码时处理错误 当解码时遇到无法解码的字节时，可以使用  errors  参数来指定如何处理这些错误。 # 字节串包含无法用 ASCII 解码的字符...
阅读全文