当前位置： 首页 > news >正文

html懒人加载实现

news 2025/8/10 21:11:18

在HTML中，懒加载（Lazy Load）是一种延迟加载图片或其他资源的技术，它可以提高页面的加载速度和性能。下面是一种实现懒加载的方法：

  1. 设置默认占位图片：在HTML中，为要延迟加载的图片设置一个默认的占位符图片，它将在图片加载之前显示。 
    <img src="placeholder.jpg" data-src="image.jpg" alt="Lazy Load Image">

  2. 添加JavaScript代码：为了实现懒加载，我们需要使用JavaScript来检测图片是否在视口（Viewport）中可见，如果是则加载实际图片。 
    document.addEventListener("DOMContentLoaded", function() {var lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));if ("IntersectionObserver" in window) {var lazyImageObserver = new IntersectionObserver(function(entries, observer) {entries.forEach(function(entry) {if (entry.isIntersecting) {var lazyImage = entry.target;lazyImage.src = lazyImage.dataset.src;lazyImage.classList.remove("lazy");lazyImageObserver.unobserve(lazyImage);}});});lazyImages.forEach(function(lazyImage) {lazyImageObserver.observe(lazyImage);});} else {// 如果浏览器不支持Intersection Observer，则简单地将所有的图片加载lazyImages.forEach(function(lazyImage) {lazyImage.src = lazyImage.dataset.src;lazyImage.classList.remove("lazy");});}
});

    此JavaScript代码使用Intersection Observer API（如果浏览器支持）来观察图片是否在视口中可见。如果图片可见，则将实际图片的URL赋值给src属性，并从lazy类中移除。如果浏览器不支持Intersection Observer，那么它会简单地将所有图片加载出来。 3. 样式调整：为了更好地展示懒加载效果，你可以为占位符图片和实际图片添加一些样式。

    img {max-width: 100%;height: auto;display: block;
}
.lazy {filter: blur(5px); /* 可选：模糊效果 */opacity: 0.5; /* 可选：透明度降低 */
}

    以上是一种实现懒加载的方法。当页面滚动或重新调整大小时，图片将根据它们在视口中的可见性自动加载。 请注意，懒加载并不局限于图片，你也可以将它应用于其他需要延迟加载的资源，比如视频或音频文件

   完整代码

<!DOCTYPE html>
<html>
<head><title>Lazy Load</title><style>img {max-width: 100%;height: auto;display: block;}.lazy {filter: blur(5px); /* 可选：模糊效果 */opacity: 0.5; /* 可选：透明度降低 */}</style>
</head>
<body>
<h1>Lazy Load Example</h1>
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img1.baidu.com/it/u=422078137,1307526884&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img2.baidu.com/it/u=2546424698,318222608&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img1.baidu.com/it/u=422078137,1307526884&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img1.baidu.com/it/u=422078137,1307526884&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img2.baidu.com/it/u=2546424698,318222608&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img1.baidu.com/it/u=3622442929,3246643478&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img1.baidu.com/it/u=422078137,1307526884&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img2.baidu.com/it/u=2546424698,318222608&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img2.baidu.com/it/u=2312383180,3750420672&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="Lazy Load Image" class="lazy"><script>document.addEventListener("DOMContentLoaded", function() {var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));if ("IntersectionObserver" in window) {var lazyImageObserver = new IntersectionObserver(function(entries, observer) {entries.forEach(function(entry) {if (entry.isIntersecting) {var lazyImage = entry.target;lazyImage.src = lazyImage.dataset.src;lazyImage.classList.remove("lazy");lazyImageObserver.unobserve(lazyImage);}});});lazyImages.forEach(function(lazyImage) {lazyImageObserver.observe(lazyImage);});} else {lazyImages.forEach(function(lazyImage) {lazyImage.src = lazyImage.dataset.src;lazyImage.classList.remove("lazy");});}});
</script>
</body>
</html>

实现效果

相关文章：

html懒人加载实现

在HTML中&#xff0c;懒加载&#xff08;Lazy Load&#xff09;是一种延迟加载图片或其他资源的技术&#xff0c;它可以提高页面的加载速度和性能。下面是一种实现懒加载的方法&#xff1a; 设置默认占位图片&#xff1a;在HTML中&#xff0c;为要延迟加载的图片设置一个默认的…...

编程日记 2023/12/20 15:42:29

Axure情形动作篇（ERP登录效验）

目录 一、ERP系统用户登录效验 1.1 完成步骤 1.2 最终效果 二、省市区联动 三、ERP菜单栏页面跳转 四、下拉加载效果实现 4.1 加载动画实现步骤 4.2 下划界面加载实现 4.3 最终效果 一、ERP系统用户登录效验 1.1 完成步骤 首先搭建ERP系统的登录界面&#xff08;输入…...

编程日记 2023/12/20 15:40:27

LeetCode刷题--- 子集

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题【 http://t.csdnimg.cn/yUl2I 】【C】 【 http://t.csdnimg.cn/6AbpV 】数据结构与算法【 http://t.csdnimg.cn/hKh2l 】 前言&#xff1a;这个专栏主要讲…...

编程日记 2023/12/20 15:39:26

【SQL】根据年份，查询每个月的数据量

根据年份&#xff0c;查询每个月的数据量 一种 WITH Months AS (SELECT 1 AS Month UNION ALL SELECT 2 UNION ALL SELECT 3 UNION ALL SELECT 4 UNION ALL SELECT 5 UNION ALL SELECT 6 UNION ALL SELECT 7 UNION ALL SELECT 8 UNION ALL SELECT 9 UNION ALL SELECT 10 UNION…...

编程日记 2023/12/20 15:37:24

基于CTF探讨Web漏洞的利用与防范

写在前面 Copyright © [2023] [Myon⁶]. All rights reserved. 基于自己之前在CTF中Web方向的学习&#xff0c;总结出与Web相关的漏洞利用方法&#xff0c;主要包括&#xff1a;密码爆破、文件上传、SQL注入、PHP伪协议、反序列化漏洞、命令执行漏洞、文件包含漏洞、Vim…...

编程日记 2023/12/20 15:36:22

Apache CouchDB 垂直权限绕过漏洞 CVE-2017-12635 已亲自复现

Apache CouchDB 垂直权限绕过漏洞 CVE-2017-12635 已亲自复现 漏洞名称影响版本影响版本 漏洞复现环境搭建漏洞利用 总结 漏洞名称 影响版本 Apache CouchDB是一个开源的NoSQL数据库&#xff0c;专注于易用性和成为“完全拥抱web的数据库”。它是一个使用JSON作为数据存储格式…...

编程日记 2023/12/20 15:33:18

海康威视IP网络对讲广播系统命令执行漏洞(CVE-2023-6895)

漏洞介绍 海康威视IP网络对讲广播系统采用领先的IPAudio™技术,将音频信号以数据包形式在局域网和广域网上进行传送,是一套纯数字传输系统。 Hikvision Intercom Broadcasting System 3.0.3_20201113_RELEASE(HIK)版本存在操作系统命令注入漏洞&#xff0c;该漏洞源于文件/ph…...

编程日记 2023/12/20 15:32:17

IDE：DevEco Studio

简介 DevEco Studio是华为为开发者提供的一款集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要用于开发鸿蒙操作系统&#xff08;HarmonyOS&#xff09;的应用程序。作为一款全场景分布式开发工具&#xff0c;DevEco Studio支持多端开发、调试和模拟&#xff0c;为开…...

编程日记 2023/12/20 15:31:16

【QT】C++/Qt使用Qt自带工具windeployqt打包

基本操作 运行项目debug或者release 将运行后的可执行文件单独放到一个文件夹中 根据项目使用的kits来选择Qt的打包工具 打开工具后移动到exe文件夹下执行windeployqt xxx.exe 预览图 问题 打包后再其他电脑上运行出现下图错误 将自己电脑的这个文件拷到可执行文件夹中既…...

编程日记 2023/12/20 15:30:15

Ubuntu系统的基础操作和使用

文章目录 系统安装系统界面文件系统包管理命令行常见问题 Ubuntu是一个基于Debian的Linux发行版&#xff0c;以桌面应用为主。它是自由软件&#xff0c;意味着你可以自由地使用、复制、研究、修改和改进这个软件。下面我们将详细介绍Ubuntu系统的基础操作和使用。 系统安装 U…...

编程日记 2023/12/20 15:28:13

harmonyOS 自定义组件基础演示讲解

上文 HarmonyOS组件属性控制 链式编程格式推荐我们讲了一些系统组件 可以传入一些事件和参数 来达到一些不同的效果 其实 我们还可以用自己写的组件 那么 组件这么写&#xff1f; 其实 我们的 page 内部结果 就是一个组件 harmonyOS的概念 万物皆组件 那么 我们就可以在他下面…...

编程日记 2023/12/20 15:27:12

我的创作纪念日——成为创作者第1024天

机缘 一、前言 早上收到CSDN的推送信息&#xff0c;今天是我成为创作者的第1024天&#xff0c;回想起自己已经好久没有写博客了&#xff0c;突然间很有感触&#xff0c;想水一篇文章&#xff0c;跟小伙伴们分享一下我的经历。 二、自我介绍 我出生在广东潮汕地区的一个小城…...

编程日记 2023/12/20 15:25:11

正点原子驱动开发BUG(一)--SPI无法正常通信

目录 一、问题描述二、讲该问题的解决方案三、imx6ull的spi适配器驱动程序控制片选分析3.1 设备icm20608的驱动程序分析3.2 imx的spi适配器的驱动程序分析 四、BUG修复测试五、其他问题 一、问题描述 使用正点的im6ull开发板进行spi通信驱动开发实验的时候&#xff0c;主机无法…...

编程日记 2023/12/20 15:18:04

SpringBoot接入轻量级分布式日志框架GrayLog

1.前言 日志在我们日常开发定位错误&#xff0c;链路错误排查时必不可少&#xff0c;如果我们只有一个服务&#xff0c;我们可以只简单的通过打印的日志文件进行排查定位就可以&#xff0c;但是在分布式服务环境下&#xff0c;多个环境的日志统一收集、展示则成为一个问题。目…...

编程日记 2023/12/20 15:15:02

光电器件：感知光与电的桥梁

光电器件是电子工程领域的一个重要分支&#xff0c;主要研究光与电之间的相互转换。这些器件在许多领域都有广泛的应用&#xff0c;如通信、生物医学、军事等。 光电器件主要包括光电二极管、光电晶体管、光电倍增管等。这些器件的工作原理都是基于光电效应&#xff0c;即光子…...

编程日记 2023/12/20 15:13:00

Ceph入门到精通-smartctl 查看硬盘参数

smartctl 参数含义 Model Family: Toshiba s... Enterprise Capacity HDD Device Model: TOSHIBA MG08ACss Serial Number: sssssss LU WWN Device Id: 5 ss ss Firmware Version: 4303 User Capacity: 16,000,900,661,248 bytes [16.0 TB] Sector Sizes: 51…...

编程日记 2023/12/20 15:10:58

Module build failed: TypeError: this.getOptions is not a function

在使用webpack打包出现以上错误时&#xff0c;可能是你安装的css-loader和style-loader的版本过高。 我用的webpack版本是3.6.0 因此需要降低一下版本 在你编辑器终端输入以下命令&#xff1a; npm install css-loader3.6.0 npm install --save-dev style-loader1.00 然后接下…...

编程日记 2023/12/20 15:07:56

蓝牙电子价签芯片OM6626/OM628超低功耗替代NRF52832

电子价签应用简介 在全球零售业受到电商冲击、劳动力成本和周转率上升、消费者需求改变的行业背景下&#xff0c;电子价签、AI货架监控系统、自助结账设备、相关的方案将零售行业的发展带上智能化数字化的发展道路上。为企业与客户带来的更高效更便捷的消费体验。 蓝牙电子价…...

编程日记 2023/12/20 15:02:51

ELK（八）—Metricbeat部署

目录 介绍修改配置文件启动 Modulenginx开启状态查询配置Nginx module查看是否配置成功 介绍 Metricbeat 是一个轻量级的开源度量数据收集器&#xff0c;用于监控系统和服务。它由 Elastic 公司开发&#xff0c;并作为 Elastic Stack&#xff08;Elasticsearch、Logstash、Kiba…...

编程日记 2023/12/20 15:01:50

Ansible自动化运维以及模块使用

ansible的作用&#xff1a; 远程操作主机功能 自动化运维(playbook剧本基于yaml格式书写) ansible是基于python开发的配置管理和应用部署工具。在自动化运维中&#xff0c;现在是异军突起 ansible能够批量配置、部署、管理上千台主机。类似于Xshell的一键输入工具。不需要每…...

编程日记 2023/12/20 14:59:47

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/8/8 18:31:23

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/8/3 22:15:08

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/8/10 1:12:39

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/6/21 2:22:29

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/7/31 23:29:00

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2025/7/31 14:53:04

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/7/5 17:21:18

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

编程新知 2025/7/6 9:37:11

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践&#xff0c;很多人以为AI已经强大到不需要程序员了&#xff0c;其实不是&#xff0c;AI更加需要程序员&#xff0c;普通人…...

编程新知 2025/8/7 20:54:40

深入浅出WebGL：在浏览器中解锁3D世界的魔法钥匙

WebGL&#xff1a;在浏览器中解锁3D世界的魔法钥匙 引言&#xff1a;网页的边界正在消失 在数字化浪潮的推动下&#xff0c;网页早已不再是静态信息的展示窗口。如今&#xff0c;我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室&#xff0c;甚至沉浸式的V…...

编程新知 2025/7/7 2:32:24