js实现图片懒加载

news2025/7/9 20:16:57

js实现图片懒加载

1、介绍getBoundingClientRect()函数

该函数没有参数,用于获取元素位置,返回一个对象,具有六个属性分别是:
ele.getBoundingClientRect().top – 返回元素上边到视窗上边的距离
ele.getBoundingClientRect().left – 返回元素左边到视窗左边的距离
ele.getBoundingClientRect().bottom – 返回元素下边到视窗上边的距离
ele.getBoundingClientRect().right – 返回元素右边到视窗左边的距离

示例

<style>
    div {
        position:relative;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 120px;  
        border: 1px solid #000;                                                                                                
    }
</style>
<div>
    啊啊啊啊啊啊啊啊
    啊啊啊啊啊啊啊啊
    啊啊啊啊啊啊啊啊
</div>
<script>
     let div = document.querySelector("div");
     console.log("left:", div.getBoundingClientRect().left);
     console.log("right:", div.getBoundingClientRect().right);
     console.log("top:", div.getBoundingClientRect().top);
     console.log("bottom:", div.getBoundingClientRect().bottom);
</script>

控制台打印结果
在这里插入图片描述

实现图片懒加载

将img的src属性值写进data-src中,监听页面滚动事件,当图片可以看见,也就是说img元素顶部距离视窗顶部距离小于视窗高度,则加载data-src中的图片路径,当img元素不能看见的时候,即img元素顶部距离视窗顶部距离小于视窗大小的时候,则不加载图片路径

示例

<img data-src="./logo.png" alt="">
<img data-src="./logo.png" alt="">
<img data-src="./logo.png" alt="">
    
<script>
  const imgs = document.querySelectorAll('img');
  window.addEventListener('scroll', (e) => {
      imgs.forEach( img => {
          const imgTop = img.getBoundingClientRect().top;
          if(imgTop < window.innerHeight) {
              const data_src = img.getAttribute('data-src');
              img.setAttribute('src', data_src)
          }
      })
  })
</script>

但是以上方法有弊端,就是尽管图片已经加载完成,但依旧会不断的触发滚动事件
因此推荐使用IntersectionObserver,这是浏览器提供的函数,交叉观察,当目标元素和可是窗口出现交叉区域时,触发事件事件会触发两次,目标元素看见和看不见都会触发

IntersectionObserver

<script>
const imgs = document.querySelectorAll('img');
const callback = (entries) => {
	// 回调函数会接受一个entries参数
	entries.forEach( entry => {
		if(entry.isIntersecting) {  // 此属性进入交叉区就会为true,否则为false
			const img= entry.target;  // 获取当前进入交叉区的元素
			const data_src = img.getAttribute('data-src');
			img.setAttribute('src', data_src);
			observer.unobserve(img); // 加载完图片后对当前img元素停止观察
		}
	})
}
const observer = new IntersectionObserver(callback);

imgs.forEach(img => {
	observer.observe(img)
})
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【经典面试题-LeetCode134:加油站问题(Java实现)】

加油站问题一、题目描述1.题目内容2.样例二、解决方案1.分析2.核心代码一、题目描述 1.题目内容 在一条环路上有 n 个加油站&#xff0c;其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车&#xff0c;从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i…

自动控制原理 - 2 控制系统的数学模型 节2.4-2.6

------------------------------------------------------------------------------ 2 控制系统的数学模型2.4 控制系统的传递函数2.5 典型环节的传递函数2.6 结构图的绘制 2 控制系统的数学模型 2.4 控制系统的传递函数 为何引入传递函数&#xff1f; 微分方程模型的优缺…

Webpack面试题总结

说说你对webpack的理解&#xff1f;解决了什么问题&#xff1f; webpack最初的目标是实现前端项目模块化&#xff0c;目的在于更高效的管理和维护项目中的每一个资源 模块化&#xff1a; 最早的时候&#xff0c;我们通过文件划分的形式实现模块化&#xff0c;也就是将每个功能…

JVM性能——开启回收日志和实时查看GC信息

JVM性能——开启回收日志和实时查看GC信息 JDK版本&#xff1a;OpenJDK 1.8.0_352-b08 操作系统&#xff1a;CentOS 7 如果文章内出现测试数据测试代码 depth:23 关于JVM的其他文章 JVM性能——垃圾回收器的优化策略 JVM性能——垃圾回收器的介绍 JVM性能——开启回收日…

网络赚钱项目 - 虚拟项目如何选择产品

今日一个老粉找我&#xff0c;他去年3月份就重视我跟我互动了&#xff0c;他上来并不是索取什么&#xff0c;而是给我信息&#xff0c;比如他最近测验了什么产品&#xff0c;什么产品好卖&#xff0c;都会把测验的数据告诉我&#xff0c;当然作为回报&#xff0c;我也会告诉他一…

Centos7宝塔部署python

前言&#xff1a;宝塔本身有python项目管理器&#xff0c;但是有些依赖安装会存在问题&#xff0c;比如paddlehub安装总是失败&#xff0c;本文在宝塔安装了anaconda基础上配合python项目管理器去部署项目&#xff0c;保障依赖隔离不混乱。 centos7宝塔安装conda流程地址&…

Linux使用YUM安装程序

目录 前言 什么是YUM&#xff1f; 1.本地源&#xff1a;系统安装光盘 目的 1&#xff09;观察YUM核心配置目录 2&#xff09;删除官方YUM库 3&#xff09;编写本地YUM库配置文件 4&#xff09;挂载安装光盘 保证把光盘放到服务器上&#xff0c;通电 挂载 5&#xff0…

np中的normalize/histogram/cumsum/interp函数

一、normalize函数 void normalize(InputArray src,OutputArray dst, double alpha=1, double beta=0, int norm_type=NORM_L2, int dtype=-1, InputArray mask=noArray() ) 归一化就是要把需要处理的数据经过处理后 (通过某种算法)限制在你需要的一定范围内。首先归一…

深入注册表监控

前言 注册表是windows的重要数据库&#xff0c;存放了很多重要的信息以及一些应用的设置&#xff0c;对注册表进行监控并防止篡改是十分有必要的。在64位系统下微软提供了CmRegisterCallback这个回调函数来实时监控注册表的操作&#xff0c;那么既然这里微软提供了这么一个方便…

用红黑树封装map和set

文章目录:红黑树模拟实现完整代码红黑树参数适配改造仿函数正向迭代器反向迭代器红黑树封装后的代码map完整代码set完整代码红黑树模拟实现完整代码 如下是红黑树kv模型的模拟实现完整代码&#xff0c;现在我们需要基于此代码封装出map和set基本的接口实现。 #pragma once #i…

音视频开发风潮 | 聊聊为啥从事音视频开发

音视频开发风潮 聊聊为啥从事音视频技术&#xff0c;未来会很赚钱 核心竞争力&#xff1a;音视频是程序界的皇冠&#xff0c;掌握音视频意味着拿到通往未来的船票&#xff0c;不用担心会被其他人替代。因为音视频是有一定门槛的&#xff0c;所以也是与其他人拉开差距的分水岭…

基于Linux的Spark安装与环境配置

文章目录基于Linux的Spark安装与环境配置1、Hadoop测试1.1 启动hadoop1.2 再次启动hadoop1.3 查看是否成功2、Scala安装与配置2.1 下载scala2.2 解压并重命名2.3 配置环境2.4 测试3、Spark安装与配置3.1 下载Spark3.2 解压并重命名3.3 配置环境3.4 配置spark-env.sh3.5 配置sla…

RabbitMQ中VirtualHost相关设置、SpringBoot中集成常见问题总结

wshanshi&#xff1a;总结记录…便于回顾… 一、VirtualHost相关设置 1.1、创建VirtualHost rabbitmqctl add_vhost 虚拟服务器名称如&#xff1a;rabbitmqctl add_vhost test 1.2、用户、权限相关设置 1.2.1、创建用户 rabbitmqctl add_user 用户名 密码如&#xff1a;ra…

Baklib经验分享 | 一些搭建帮助中心的攻略

作为一家企业&#xff0c;既要为用户提供优质的产品&#xff0c;又要为用户提供良好的售后服务。 很多企业在建立网站的时候可能低估了帮助中心的价值&#xff0c;但是实际上&#xff0c;一家好的在线帮助中心可以帮助企业留住用户&#xff0c;而且用户还可以通过自助查询来解…

【Redis系列】Linux查看Redis版本信息

目录 一、详细介绍 1.redis-server -v 1.1 进入容器 1.2 查询redis-server 目录 1.3 进入对应目录 1.4 执行命令 2.redis-cli -v 1.1 进入容器 1.2 查询redis-cli 目录 1.3 进入对应目录 1.4 执行命令 一般是有两种方式 redis-server -vredis-cli -v一、详细介绍 1.…

【数据库系列】如何查看MongoDB版本信息

目录 一、方法介绍 1 mongo --version 2 使用mongod 3 db.version() 二、总结 三种方式可以查看&#xff0c;依次如下&#xff1a; 一、方法介绍 首先要找到mongo的路径&#xff0c;如果不知道在哪&#xff0c;可以输入 whereis mongo 如下图&#xff0c;找到对应的目录…

VMWare安装CentOS7操作系统的虚拟机

【原文链接】VMWare安装CentOS7操作系统的虚拟机 &#xff08;1&#xff09;可以从 清华大学镜像源 下载centos7的镜像&#xff0c;比如下载如下这个版本 &#xff08;2&#xff09;打开VMWare后&#xff0c;点击【创建虚拟机】 &#xff08;3&#xff09;选择【自定义高级…

OAuth 2.0 (第三方登录)前端流程实现

目录 一、OAuth是什么 二、OAuth 实现&#xff0c;前端需要做什么 &#xff08;一&#xff09;数据收集表单 &#xff08;二&#xff09;获取后端返回值 &#xff08;三&#xff09;重定向地址及后续处理 三、项目地址 一、OAuth是什么 OAuth就是让"客户端"安全…

vue-router入门学习3

命名路由 使用命名路由实现声明式导航 要在路由规则里加上name属性&#xff0c;相对于给这个地址取别名&#xff0c;当地址非常长时可以充分体现它的好用之处。 这里的to属性前面要加个冒号噢 调用push函数期间指定一个配置对象&#xff0c;name是要跳转到的路由规则、params是…

真题集P127---2018年真题

真题集P127---2018年真题第一题思路辗转相除法代码第三题思路代码第六题思路代码第一题 思路 就是在考学生&#xff0c;如何快速求解最大公约数问题 <1>从mn中选较小的数开始向下枚举&#xff0c;一直到2为止&#xff0c;第一个能同时整除m,n的即为所求(暴力枚举不推荐)…