图片的懒加载

目录

懒加载的来源

事件监听

IntersectionObserver


懒加载的来源

图片的来加载其实就是延迟加载,我们知道浏览器的可视范围是有限的,现在网页的内容越来越丰富,一般网页的内容都是需要滚动才能完成浏览

如果网页有很多图片,然而图片是非常吃流量的,如果用户还没看到网页下面的内容,在某种程度上我们就没必要这么快加载这些看不见的图片,懒加载的概念便由此而生。既然要滚动到网页下面才能预览到看不见的图片,我们提出以下两种方法。

事件监听

监听scroll这个事件,当鼠标滚动就会触发监听器,执行回调函数!

那么这里我们需要知道两个高度,首先是窗口显示区的高度,可以用window.innerHeight获取;其次是图片到视窗顶部的距离(高度),可以用元素的getBoundingClientRect().top来获取

图片还未被看见:图片距离视窗顶部的距离>窗口显示区的高度

图片可以被看见:图片距离视窗顶部的距离<窗口显示区的高度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片懒加载</title>
</head>

<body>
    <div style="height: 110%;background-color:grey;"></div>
    <!-- data-*自定义属性,浏览器碰到这个属性的时候是不会像默认属性那样进行属性处理的 -->
    <div class="test"><img data-src="1.jpg"></div>
    <div class="test"><img data-src="2.jpg"></div>
    <div class="test"><img data-src="3.jpg"></div>
    <div style="height: 30%;background-color:black;"></div>
</body>
<script>
    const images = document.querySelectorAll('img')
    window.addEventListener('scroll', (e) => {
        images.forEach(image => {
            const imageTop = image.getBoundingClientRect().top;
            if (imageTop < window.innerHeight) {
                const data_src = image.getAttribute('data-src');
                image.setAttribute('src', data_src);
            }
        })
        console.log('scroll触发')
    })
</script>
<style>
    * {
        margin: 0px;

    }

    html,
    body {
        height: 100%;
    }

    .test {
        height: 30%;
    }

    img {
        height: 100%;
    }
</style>

</html>

这里我们在网络中禁用缓存,并且用快速3G来测试恶劣的网络环境

视频演示

在视频中我们可以看见滚动事件被触发了相当多次,如果是执行一些简单的动作还好,但是页面需要加载很多内容的时候,就会导致任务的堆积,而且即使图片已经加载了还是会不断的触发事件,非常消耗资源。

IntersectionObserver

IntersectionObserver,是浏览器提供的构造函数,也就是我们可以直接拿来用,当然前提是浏览器能支持,部分浏览器版本是不兼容的

IntersectionObserver,字面意思是交叉观察,也就是目标元素和可视窗口会产生交叉区域,观察交叉区域发生了什么事情,然后我们需要执行什么程序。

构造函数接收两个参数,这里我们介绍第一个参数,第一个参数是一个回调函数,既然是回调函数一般是需要触发条件然后来执行的,这个函数一般触发两次,目标元素能看见触发一次,目标元素看不见了又触发一次

开始执行代码的时候isIntersection的值为false,也就是表示还没有进入可视区域,还没有滚动的时候是false,但是当我们滚动到图片区域,图片在可视区域的时候,isIntersection属性变为了true,有这个属性我们就可以判断该次触发回调函数时,是否已经观察到了图片。

    const images = document.querySelectorAll('img')
    const callback = (entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const image = entry.target;
                const data_src = image.getAttribute('data-src');
                image.setAttribute('src', data_src);
                observer.unobserve(image)
                console.log('触发')
            }
        })
    };
    const observer = new IntersectionObserver(callback)
    images.forEach(image => {
        observer.observe(image);
    })

视频演示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/929353.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【每日刷题】Day162

【每日刷题】Day162 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 3302. 字典序最小的合法序列 - 力扣&#xff08;LeetCode&#xff09; 2. 44. 通配符匹配 - 力扣&…

Hadoop生态圈框架部署 伪集群版(四)- Zookeeper单机部署

文章目录 前言一、Zookeeper单机部署&#xff08;手动部署&#xff09;1. 下载Zookeeper安装包到Linux2. 解压zookeeper安装包3. 配置zookeeper配置文件4. 配置Zookeeper系统环境变量5. 启动Zookeeper6. 停止Zookeeper在这里插入图片描述 注意 前言 本文将详细介绍Zookeeper的…

捷联惯导原理和算法预备知识

原理和算法预备知识 牛顿第一运动定律-惯性定律&#xff1a;如一物体不受外力作用&#xff0c;它将保持静止状态或匀速直线运动状态不变。 牛顿第二运动定律&#xff1a;表达式为Fma,。其中F为物体所受的合力&#xff0c;m为物体的质量&#xff0c;a为物体的加速度。这个公式…

工业—使用Flink处理Kafka中的数据_ChangeRecord1

使用 Flink 消费 Kafka 中 ChangeRecord 主题的数据,当某设备 30 秒状态连续为 “ 预警 ” ,输出预警 信息。当前预警信息输出后,最近30

简单注册器

简单注册器 还是想查壳 发现这是apx文件 放入JEB里进行反编译 在JEB里使用快捷键Tab 可以反编译 转化成java语言 我们在搜索一下字符串flag 得到了下面这一串字符串 这里他对这串字符串进行了一系列的加密算法 img src"C:\Users\22069\Pictures\Screenshots\屏幕截图 20…

MySQL两阶段提交目的

阶段提交的过程 事务执行阶段&#xff1a;事务开始执行&#xff0c;InnoDB执行SQL语句的具体操作&#xff0c;如数据修改、删除等&#xff0c;并将这些操作记录在内存中。写入Redo Log&#xff08;准备阶段&#xff09;&#xff1a;事务即将提交时&#xff0c;首先将事务相关的…

33 基于单片机的智能窗帘控制系统

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于51单片机&#xff0c;采用DHT11温湿度传感器检测温湿度&#xff0c;滑动变阻器连接ADC0832数模转换器转换模拟,光敏传感器&#xff0c;采用GP2D12红外传感器&#xff0c;通过LCD1602显示屏显示…

Qt关于padding设置不起作用的的解决办法

观察以下的代码&#xff1a; MyWidget::MyWidget(QWidget *parent): QWidget{parent},m_btn(new QToolButton(this)) {this->setFixedSize(500,500);m_btn->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);m_btn->setIcon(QIcon("F:tabIcon/person-white.s…

zookeeper在确认config无误后仍处于standalone模式的解决方法

jps查看是否有QuorumPeerMain进程 停止服务后该进程仍然存在&#xff0c;输入&#xff1a; ps -ef | grep QuorumPeerMain | grep -v grep | awk {print $2} | xargs kill 之后再启动一次进程 bin/zkServer.sh start 查看状态 bin/zkServer.sh status 发现报错解决&#…

Electron-vue 框架升级 Babel7 并支持electron-preload webapck 4 打包过程记录

前言 我这边一直用的electron-vue框架是基于electron 21版本的&#xff0c;electron 29版本追加了很多新功能&#xff0c;但是这些新功能对开发者不友好&#xff0c;对electron构建出来的软件&#xff0c;使用者更安全&#xff0c;所以&#xff0c;我暂时不想研究electron 29版…

Gartner报告解读(四)| 如何运用上升期的基础设施自动化(IA)为企业数字化转型赋能?

近期&#xff0c;Gartner发布的《2024年中国基础设施战略技术成熟度曲线》显示&#xff0c;未来5-10年&#xff0c;大量具有颠覆性或较高影响力的创新技术可能会实现主流采用&#xff0c;其中就包括基础设施自动化&#xff08;IA&#xff09;。 基础设施自动化Gartner评估情况 …

博泽Brose EDI项目案例

Brose 是一家德国的全球性汽车零部件供应商&#xff0c;主要为全球汽车制造商提供机电一体化系统和组件&#xff0c;涵盖车门、座椅调节系统、空调系统以及电动驱动装置等。Brose 以其高质量的创新产品闻名&#xff0c;在全球拥有多个研发和生产基地&#xff0c;是全球第五大家…

springboot读取tif图片转为png在前端预览

springboot读取tif图片转为png在前端预览 我这里是读取tif后转为png,再转为base64直接传给前端。 在线预览base64的地址&#xff1a;http://www.ecomcn.com/tool/Base64/ 文件目录结构&#xff1a; 代码&#xff1a; Overridepublic List<YbglSetYbSPlitListVo> ybgl…

学习日志020---qt信号与槽

作业 import sysfrom PySide6.QtWidgets import QApplication, QWidget,QPushButton,QLineEditfrom Form import Ui_Form from second import Ui_second from PySide6.QtCore import Qtclass MyWidget(QWidget,Ui_Form):def __init__(self):super().__init__()self.setupUi(se…

Lua元表和元方法的使用

元表是一个普通的 Lua 表&#xff0c;包含一组元方法&#xff0c;这些元方法与 Lua 中的事件相关联。事件发生在 Lua 执行某些操作时&#xff0c;例如加法、字符串连接、比较等。元方法是普通的 Lua 函数&#xff0c;在特定事件发生时被调用。 元表包含了以下元方法&#xff1…

【HarmonyOS】鸿蒙应用使用lottie动画

【HarmonyOS】鸿蒙应用使用lottie动画 一、lottie动画是什么&#xff1f; https://airbnb.design/lottie Lottie是由Airbnb团队开发的一个适用于iOS、Android、React Native、Web和Windows的开源动画库&#xff0c;用于解析使用Bodymovin导出为JSON的Adobe After Effects动…

前缀和(四)除自身以外数组的乘积

238. 除自身以外数组的乘积 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&…

在数据库设计中同步冗余字段的思考与实践

目录 前言1. 冗余字段设计的背景与场景1.1 场景描述1.2 冗余字段的必要性 2. 冗余字段设计的优点2.1 提高查询效率2.2 简化应用逻辑 3. 冗余字段设计的缺点与挑战3.1 数据不一致问题3.2 更新开销增加3.3 数据冗余占用存储空间 4. 如何同步更新冗余字段4.1 手动更新方式4.2 使用…

Qt开发技巧(二十四)滚动部件的滑动问题,Qt设置时区问题,自定义窗体样式不生效问题,编码格式问题,给按钮左边加个图,最小化后的卡死假象

继续记录一些Qt开发中的技巧操作&#xff1a; 1.滚动部件的滑动问题 再Linux嵌入式设备上&#xff0c;有时候一个页面的子部件太多&#xff0c;一屏放不下是需要做页面滑动&#xff0c;可以使用“QScrollArea”控件&#xff0c;拖来一个“QScrollArea”控件&#xff0c;将子部件…

【5G】5G技术组件 5G Technology Components

5G的目标设置非常高&#xff0c;不仅在数据速率上要求达到20Gbps&#xff0c;在容量提升上要达到1000倍&#xff0c;还要为诸如大规模物联网&#xff08;IoT&#xff0c; Internet of Things&#xff09;和关键通信等新服务提供灵活的平台。这些高目标要求5G网络采用多种新技术…