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

html懒人加载实现

news 2026/1/18 19:50:51

在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

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2026/1/18 16:52:30

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2026/1/14 18:58:12

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/12/1 19:23:04

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2026/1/15 5:20:57

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/15 6:49:02

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/15 5:39:34

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/15 7:57:26

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57