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

html懒人加载实现

news 2026/3/31 6:42:57

在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

告别复杂配置：Ostrakon-VL-8B零售多模态模型一键部署实战

告别复杂配置&#xff1a;Ostrakon-VL-8B零售多模态模型一键部署实战 1. 为什么选择Ostrakon-VL-8B&#xff1f; 零售行业每天需要处理大量商品图片、货架陈列和顾客反馈&#xff0c;传统的人工分析方式效率低下且成本高昂。Ostrakon-VL-8B作为专为零售场景优化的多模态大模型…...

编程新知 2026/3/31 6:40:48

ofa_image-caption算力适配：A10G云GPU上稳定运行的最小配置方案

ofa_image-caption算力适配&#xff1a;A10G云GPU上稳定运行的最小配置方案 1. 引言 如果你正在寻找一个能自动为图片生成英文描述的本地工具&#xff0c;并且希望它能在消费级显卡上流畅运行&#xff0c;那么基于OFA模型的图像描述生成工具很可能就是你的答案。这个工具最大…...

编程新知 2026/3/31 5:26:13

终极PDF Arranger常见问题FAQ：解决用户最关心的30个疑问

终极PDF Arranger常见问题FAQ&#xff1a;解决用户最关心的30个疑问 【免费下载链接】pdfarranger Small python-gtk application, which helps the user to merge or split PDF documents and rotate, crop and rearrange their pages using an interactive and intuitive gra…...

编程新知 2026/3/31 4:25:13

从卡顿到流畅：Win11Debloat开源工具3步解决Windows系统优化难题

从卡顿到流畅&#xff1a;Win11Debloat开源工具3步解决Windows系统优化难题 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本&#xff0c;用于从Windows中移除预装的无用软件&#xff0c;禁用遥测&#xff0c;从Windows搜索中移除Bing&#xff0c;以及执行各种其他更改…...

编程新知 2026/3/31 4:17:07

QWEN-AUDIO开箱即用指南：无需conda/pip，纯Docker镜像启动

QWEN-AUDIO开箱即用指南&#xff1a;无需conda/pip&#xff0c;纯Docker镜像启动 想体验一下“有温度”的AI语音合成吗&#xff1f;以前你可能需要折腾Python环境、安装各种依赖、处理版本冲突&#xff0c;光是配置环境就能劝退一大半人。今天&#xff0c;我要分享一个完全不同…...

编程新知 2026/3/31 4:15:04

【等保三级Java系统合规落地指南】：20年安全架构师亲授7大关键改造步骤与避坑清单

第一章&#xff1a;等保三级Java系统合规落地的顶层认知与法律依据等保三级&#xff08;GB/T 22239–2019《信息安全技术 网络安全等级保护基本要求》&#xff09;并非单纯的技术加固任务&#xff0c;而是覆盖组织管理、制度建设、技术实施与持续运营的全生命周期合规工程。对J…...

编程新知 2026/3/31 2:11:23

石家庄整家定制哪个好

在石家庄&#xff0c;寻找合适的整家定制服务&#xff0c;是许多家庭打造理想居住空间的重要一步。今天&#xff0c;我们想为您介绍一个专注于中高端整家定制的品牌——MJ.HOME美境美家木作。关于美境美家木作美境美家木作是一个集整案设计施工与定制家居于一体的品牌。他们致力…...

编程新知 2026/3/31 1:45:16

Java函数计算部署实战：从本地调试到生产环境上线的7个关键步骤（含阿里云/华为云/AWS对比）

第一章&#xff1a;Java函数计算部署全景概览Java函数计算是云原生场景下轻量级、事件驱动型服务的重要实现方式。它将传统Java应用的部署范式从虚拟机/容器迁移至按需执行、自动扩缩的无服务器架构&#xff0c;显著降低运维复杂度与资源闲置成本。开发者只需聚焦业务逻辑&…...

编程新知 2026/3/31 1:23:09

别再纠结选哪个了！CAN、串口、蓝牙、TCP，手把手教你根据项目场景选通信协议（附Android实战代码）

通信协议选型实战指南&#xff1a;从车载系统到智能家居的黄金法则 当你在凌晨三点的办公室里盯着四块显示器&#xff0c;面前摆着CAN分析仪、蓝牙嗅探器和串口调试终端时&#xff0c;突然意识到项目deadline就在明天——这种场景对嵌入式开发者来说再熟悉不过了。选择错误的通…...

编程新知 2026/3/30 23:06:17

深度解析GARbro：如何高效破解200+视觉小说资源格式的技术奥秘

深度解析GARbro&#xff1a;如何高效破解200视觉小说资源格式的技术奥秘 【免费下载链接】GARbro Visual Novels resource browser 项目地址: https://gitcode.com/gh_mirrors/gar/GARbro GARbro是一款面向视觉小说爱好者和游戏资源研究者的专业工具&#xff0c;基于.NE…...

编程新知 2026/3/30 21:41:05