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

【懒加载】js实现懒加载、vue实现图片懒加载指令

news 文章来源：https://blog.csdn.net/weixin_52479803/article/details/132428794 2025/1/10 4:27:01

懒加载

延迟加载，对于一个很长的页面，优先加载可视区域的内容，其他部分等进入可视区域时再加载

懒加载作用

是一种网页性能优化的方式，它能极大的提升用户体验。比如一个页面中有很多图片，但是首屏只出现几张，这时如果一次性把图片全部加载出来会影响性能。这时可以使用懒加载，页面滚动到可视区再加载。优化首屏加载。

图片懒加载

监听滚动条滚动事件，当视口的高度＋滚动高度，大于图片所在位置举例顶部的偏移量时(也就是距离)，加载图片资源

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div style="height: 1200px;"></div><img src="https://ts2.cn.mm.bing.net/th?id=OIP-C.Fi0rA6s5NQ1VIlwp9IzhIgHaKe&w=210&h=297&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"data-src="https://ts3.cn.mm.bing.net/th?id=OIP-C.D-43aYLc7We_sO_5ZSMIXgHaFj&w=288&h=216&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2" /><script>let img = document.getElementsByTagName("img");let num = img.length;let count = 0; lazyload();window.addEventListener('scroll', lazyload); function getTop(el) {var T = el.offsetTop;// 迭代地获取元素及其父元素相对于文档顶部的累积偏移量while (el = el.offsetParent) {T += el.offsetTop;}// 循环后 返回元素相对于文档顶部的总偏移量return T;}function lazyload() {//视口高度let viewHeight = document.documentElement.clientHeight || document.body.clientHeight;//滚动高度let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;for (let i = count; i < num; i++) {// 元素现在已经出现在视口中if (getTop(img[i]) < scrollTop + viewHeight) {// 如何图片等于默认图 则加载新图if (img[i].getAttribute("src") !== "https://ts2.cn.mm.bing.net/th?id=OIP-C.Fi0rA6s5NQ1VIlwp9IzhIgHaKe&w=210&h=297&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2") continue;img[i].src = img[i].getAttribute("data-src");count++;} else {break;}}}</script>
</body></html>

使用浏览器提供的getBoundingClientRect()，优化上述代码： lazyload修改如下：

getBoundingClientRect()用于获取元素相对于视口的位置信息

        function lazyload() {let viewHeight = document.documentElement.clientHeight || document.body.clientHeight;for (let i = count; i < num; i++) {// getBoundingClientRect() 用于获取元素相对于视口的位置信息// 当相对于视口位置 小于等于视口时说明图片已经可见了if (img[i].getBoundingClientRect().top < viewHeight) {if (img[i].getAttribute("src") !== "https://ts2.cn.mm.bing.net/th?id=OIP-C.Fi0rA6s5NQ1VIlwp9IzhIgHaKe&w=210&h=297&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2") continue;img[i].src = img[i].getAttribute("data-src");count++;} else {break;}}}

使用IntersectionObserver()再次优化上述代码

IntersectionObserver是浏览器原生提供的构造函数，用于查看某个元素是否进入了视口(viewport)，用户能否看到该元素

修改上述代码：

    <script>let img = document.getElementsByTagName("img");const observer = new IntersectionObserver(changes => {console.log(changes)//changes 是被观察的元素集合for (let i = 0, len = changes.length; i < len; i++) {let change = changes[i];// 通过这个属性判断是否在视口中if (change.isIntersecting) {const imgElement = change.target;imgElement.src = imgElement.getAttribute("data-src");// IntersectionObserver 对象的一个方法，用于停止对指定元素的观察observer.unobserve(imgElement);}}})Array.from(img).forEach(item => {observer.observe(item)});</script>

内容懒加载：

一个页面有n条订单，每次可以给他显示10条，等用户拖动滚动条滚动到订单列表底部一段距离时再显示10条，直到加载完

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {display: block;}</style>
</head><body><div style="height: 1200px;">1</div><div class="box"><span>开始</span></div><script>let div = document.getElementsByClassName("box")[0];let lastSpanElement = div.querySelector('span:last-child');const observer = new IntersectionObserver(changes => {console.log(changes)//changes 是被观察的元素集合for (let i = 0, len = changes.length; i < len; i++) {let change = changes[i];// 通过这个属性判断是否在视口中if (change.isIntersecting) {for (let i = 0; i < 10; i++) {const spanElement = document.createElement('span');spanElement.textContent = `这是第 ${i + 1} 个<span>标签`;div.appendChild(spanElement);}observer.unobserve(lastSpanElement);lastSpanElement = div.querySelector('span:last-child');observer.observe(lastSpanElement)}}})observer.observe(lastSpanElement)</script>
</body></html>

详情可参考：(IntersectionObserver API详解_

IntersectionObserver 交叉观察器 - 简书 (jianshu.com)

IntersectionObserver

浏览器的5种观察器

app.directive

自定义全局指令，它有两种写法

// 注册（对象形式的指令）
// 所有生命周期都可
app.directive('my-directive', {/* 自定义指令钩子 */
})// 注册（函数形式的指令）
// 固定只在2个生命周期上触发, mounted 和 updated 
app.directive('my-directive', () => {/* ... */
})

 vue中install方法

可供我们开发新的自定义指令跟全局注册组件，第一个参数是vue的构造器，第二个参数是可选的选项对象

然后再开始编写扩展指令之图片懒加载指令

export default {install (app) {app.component(XtxSkeleton.name, XtxSkeleton)app.component(XtxCarousel.name, XtxCarousel)
+    defineDirective(app)}
}import defaultImg from '@/assets/images/200.png'
// 扩展指令
const defineDirective = (app) => {// 图片懒加载app.directive('lazyload', {mounted(el, binding) {const observer = new IntersectionObserver(([{ isIntersecting }]) => {if (isIntersecting) {// 停止观察observer.unobserve(el)el.onerror = () => {// 图片加载失败 设置默认图el.src = defaultImg}// binding 是对象，.value就是绑定指令的值el.src = binding.value}}, {//目标元素和根元素相交部分的比例达到该值的时候，//callback 函数将会被执行threshold: 0.01})// 开始观察observer.observe(el)}})
}

使用扩展的图片懒加载指令：

<img alt="" v-lazyload="goods.picture" />

扩展：

vue还有许多工具库，其中也有类似的api可以实现这种功能，列如：

useIntersectionObserver | VueUse

相关文章：

【懒加载】js实现懒加载、vue实现图片懒加载指令

懒加载 延迟加载&#xff0c;对于一个很长的页面&#xff0c;优先加载可视区域的内容&#xff0c;其他部分等进入可视区域时再加载 懒加载作用 是一种网页性能优化的方式&#xff0c;它能极大的提升用户体验。比如一个页面中有很多图片&#xff0c;但是首屏只出现几张&#…...

编程日记 2023/8/24 13:53:19

微信小程序教学系列（7）

第七章&#xff1a;小程序安全和权限管理 第一节&#xff1a;小程序安全性保障 在开发小程序时&#xff0c;我们要时刻牢记小程序的安全性。毕竟&#xff0c;我们可不希望我们的小程序被黑客入侵或者用户的隐私被泄露。所以&#xff0c;让我们一起来了解一下如何保障小程序的…...

编程日记 2023/8/24 13:52:18

Android 9.0 kenel和frameworks中修改ram运行内存的功能实现

1.前言 在9.0的系统rom产品开发定制中，在对一些产品开发中的配置需求方面，在产品后续订单中，在某些机型中需要升级下系统内核配置，项目时间比较仓促，所以 来不及对硬件重新定制，就需要软件方面在ram运行内存的容量大小方面作假，修改ram真实的大小容量，所以就需要在ken…...

编程日记 2023/8/24 13:51:17

PHP实践：获取网络上图片的长宽以及图片类型

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责…...

编程日记 2023/8/24 13:50:15

使用 DPO 微调 Llama 2

简介 基于人类反馈的强化学习 (Reinforcement Learning from Human Feedback&#xff0c;RLHF) 事实上已成为 GPT-4 或 Claude 等 LLM 训练的最后一步&#xff0c;它可以确保语言模型的输出符合人类在闲聊或安全性等方面的期望。然而&#xff0c;它也给 NLP 引入了一些 RL 相关…...

编程日记 2023/8/24 13:49:14

数据库——事务，事务隔离级别

文章目录 什么是事务?事务的特性(ACID)并发事务带来的问题事务隔离级别实际情况演示脏读(读未提交)避免脏读(读已提交)不可重复读可重复读防止幻读(可串行化) 什么是事务? 事务是逻辑上的一组操作&#xff0c;要么都执行&#xff0c;要么都不执行。 事务最经典也经常被拿出…...

编程日记 2023/8/24 13:48:13

对《VB.NET通过VB6 ActiveX DLL调用PowerBasic及FreeBasic动态库》的改进

《VB.NET通过VB6 ActiveX DLL调用PowerBasic及FreeBasic动态库》使用的Activex DLL公共对象是需要先注册的。https://blog.csdn.net/weixin_45707491/article/details/132437502?spm1001.2014.3001.5501 Activex DLL事前注册&#xff0c;一次多用说起来也不是啥大问题&#x…...

编程日记 2023/8/24 13:47:12

【PHP】数据类型运算符位运算

文章目录 数据类型简单&#xff08;基本&#xff09;数据类型&#xff1a;4个小类复合数据类型&#xff1a;2个小类特殊数据类型&#xff1a;2个小类类型转换类型判断整数类型浮点类型布尔类型 运算符赋值运算符算术运算符比较运算符逻辑运算符连接运算符错误抑制符三目运算符自…...

编程日记 2023/8/24 13:46:11

使用 Nacos 作为 Spring Boot 配置中心

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

编程日记 2023/8/24 13:45:10

微服务 Eureka

Eureka Eureka是Netflix开源的一个用于构建基于微服务架构的服务发现和注册中心技术。在微服务架构中&#xff0c;系统被拆分成多个小型、自治的服务&#xff0c;每个服务负责特定的业务功能。这些服务需要能够相互发现和通信&#xff0c;这就是Eureka所提供的功能。 Eureka主…...

编程日记 2023/8/24 13:44:09

Spring Boot 事务和事务传播机制

1. 为什么需要事务? 事务定义 将一组操作封装成一个执行单元 (封装到一起)&#xff0c;这一组的执行具备原子性, 那么就要么全部成功&#xff0c;要么全部失败. 为什么要用事务? 比如转账分为两个操作: 第一步操作:A 账户-100 元。 第二步操作:B账户 100 元。 如果没有事务&a…...

编程日记 2023/8/24 13:43:05

计算机组成原理（巨巨巨基础篇）

有关《计算机组成原理》课本中有关 内存计算换算&#xff08;字&#xff0c;位&#xff0c;字节&#xff09; 个人理解 前面知识点搭建框架&#xff0c;最后两道例题是直观理解体会 主存储器的基本概念 位&#xff1a;存储信息的最小单位&#xff0c;称为存储位或存储元。 背…...

编程日记 2023/8/24 13:42:04

C语言：选择+编程（每日一练Day7）

目录 选择题&#xff1a; 题一&#xff1a; 题二&#xff1a; 题三&#xff1a; 题四&#xff1a; 题五&#xff1a; 编程题&#xff1a; 题一&#xff1a;图片整理 思路一&#xff1a; 思路二&#xff1a; 题二&#xff1a;寻找数组的中心下标 思路一&#xff1…...

编程日记 2023/8/24 13:41:03

leetcode做题笔记93. 复原 IP 地址

有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能含有前导 0&#xff09;&#xff0c;整数之间用 . 分隔。 例如&#xff1a;"0.1.2.201" 和 "192.168.1.1" 是 有效 IP 地址&#xff0c;但是 "0.011.255.2…...

编程日记 2023/8/24 13:40:01

HTTPS 中间人攻击

HTTPS 中间人攻击 中间人攻击过程 通讯过程 客户端——中间人——服务器 过程如下 服务器向客户端发送公钥攻击者截获公钥&#xff0c;保留在自己手上然后攻击者自己生成一个【伪造的】公钥&#xff0c;发给客户端客户端收到【伪造的】公钥后&#xff0c;利用【伪造的】公…...

编程日记 2023/8/24 13:38:59

MATLAB打开excel读取写入操作例程

本文使用素材含代码测试用例等 MATLAB读写excel文件历程含&#xff0c;内含有测试代码资源-CSDN文库 打开文件 使用uigetfile函数过滤非xlsx文件&#xff0c;找到需要读取的文件&#xff0c;首先判断文件是否存在&#xff0c;如果文件不存在&#xff0c;程序直接返回&#x…...

编程日记 2023/8/24 13:37:58

[C语言]分支与循环

导言&#xff1a; 在人生中我们总会有选择&#xff0c;**如下一顿吃啥&#xff1f;**又或者每天都是在重复&#xff0c;吃饭&#xff01;&#xff01;&#xff01;&#xff01;&#xff0c;当然在C语言中也有选择和重复那就是分支语句与循环语句 文章目录 分支循环循环中的关键…...

编程日记 2023/8/24 13:36:56

绘制区块链之链：解码去中心化、安全性和透明性的奇迹

区块链技术以其去中心化、安全性和透明性等特点在全球范围内引起了广泛的关注和兴趣。区块链是一种分布式账本技术&#xff0c;通过将数据以不可篡改的方式链接在一起&#xff0c;创建了一个安全可靠的数据库。这种革命性的技术正在许多领域中发挥作用&#xff0c;包括加密货币…...

编程日记 2023/8/24 13:35:55

4G工业路由器的功能与选型!详解工作原理、关键参数、典型品牌

随着工业互联网的发展,4G工业路由器得到越来越广泛的应用。但是如何根据实际需求选择合适的4G工业路由器,是许多用户关心的问题。为此,本文将深入剖析4G工业路由器的工作原理、重要参数及选型要点,并推荐优质的品牌及产品,以提供选型参考。 一、4G工业路由器的工作原理 4G工业…...

编程日记 2023/8/24 13:34:54

c与c++中struct的主要区别和c++中的struct与class的主要区别

1、c和c中struct的主要区别 c中的struct不可以含有成员函数&#xff0c;而c中的struct可以。 C语言 c中struct 是一种用于组合多个不同数据类型的数据成员的方式。struct 声明中的成员默认是公共的&#xff0c;并且不支持成员函数、访问控制和继承等概念。C中的struct通常被用…...

编程日记 2023/8/24 13:33:51

mysql中char_length()和length()

MySQL中计算字符串长度有两个函数分别为char_length和length。 char_length char_length函数可以计算unicode字符&#xff0c;包括中文等字符集的长度 char_length(‘string’)/char_length(column_name) 1、返回值为字符串string或者对应字段长度&#xff0c;长度的单位为字…...

编程日记 2023/8/24 13:32:50

Numpy学习笔记

科学计算库&#xff08;Numpy&#xff09; 通常数据都能转换成矩阵&#xff0c;行就是每一条样本数据&#xff0c;列就是每个字段的特征&#xff0c;Numpy在矩阵运算上非常高效&#xff0c;可以快速处理数据并进行数据计算。 Numpy基本操作 先导入 import numpy as nparray…...

编程日记 2023/8/24 13:31:48

LAMP配置与应用

目录 一、LAMP架构的组成 1、WEB资源类型 2、LAMP架构的组成 二、编译安装LAMP 编译安装apache 1、环境准备 2、导入apache相关压缩安装包&#xff0c;然后安装编译环境 3、解压软件包&#xff0c;并移动apr包与apr-util包到安装目录中&#xff0c;并切换到http解压出…...

编程日记 2023/8/24 13:30:46

Dockerfile搭建LNMP运行Wordpress平台

Dockerfile搭建LNMP运行Wordpress平台 一、项目1.1 项目环境1.2 服务器环境1.3 任务需求 二、Linux 系统基础镜像三、Nginx1、建立工作目录2、编写 Dockerfile 脚本3、准备 nginx.conf 配置文件4、生成镜像5、创建自定义网络6、启动镜像容器7、验证 nginx 四、Mysql1、建立工作…...

编程日记 2023/8/24 13:29:44

数据库第十五课-------------非关系型数据库----------Redis

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…...

编程日记 2023/8/24 13:28:43

BM2 链表内指定区间反转，为什么链表要new一个结点？

链表内指定区间反转_牛客题霸_牛客网 (nowcoder.com) 思路就是&#xff0c;把需要反转的结点放入栈中&#xff0c;然后在弹出来。 /*** struct ListNode {* int val;* struct ListNode *next;* ListNode(int x) : val(x), next(nullptr) {}* };*/#include<stack> class…...

编程日记 2023/8/24 13:27:41

SQL阶段性优化

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;MySQL、SQL优化、阶段性优化☀️每日 一言&#xff1a;我们要把懦弱扼杀在摇篮中。 一、前言 我们在做系统的过程中&#xff0c;难免会遇到页面查询速度慢&#xff0c;性能差的问题&#xff0c;…...

编程日记 2023/8/24 13:26:40

2023-08-22 Unity Shader 开发入门2 —— Shader 开发介绍

文章目录 一、必备概念1 计算机图形程序接口2 图形接口程序与其他概念的联系 二、Shader 开发1 Shader2 Shader 开发3 需掌握的内容 一、必备概念 1 计算机图形程序接口 ​ 计算机图形程序接口&#xff08;Graphics API&#xff09;是一套可编程的开放标准&#xff0c;不论 2…...

编程日记 2023/8/24 13:25:34

UE5 运行时捕捉外部窗口并嵌入到主窗口

UE5 运行时捕捉外部窗口并嵌入到主窗口的一种方法 创建一个Slate类用于生成一个窗口 .h// Fill out your copyright notice in the Description page of Project Settings.#pragma once#include "CoreMinimal.h" #include "Widgets/SCompoundWidget.h"/*…...

编程日记 2023/8/24 13:24:32

uniapp 使用permission获取录音权限

使用前&#xff0c;需要先配置权限 android.permission.RECORD_AUDIO...

编程日记 2023/8/24 13:23:30

北大青鸟网站建设课程/网络营销广告策划

今年上半年&#xff0c;我通过又拍云搭建了一个独立博客&#xff0c;不久之后就遇到了很多实际问题&#xff1a;网上看到图片想收藏到空间&#xff0c;YouTube上的MV想放到自己的博客&#xff0c;想对一段音视频进行在线预览和编辑……当时我查了下&#xff0c;必须要通过API接…...

编程日记 2025/1/10 2:18:08

怎么做网站维护/百度推广多少钱一天

转自&#xff1a;http://www.cnblogs.com/shangdawei/p/4760933.html 彩色阴极射线管的剖面图: 1. 电子QIANG Three Electron guns (for red, green, and blue phosphor dots)2. 电子束 Electron beams3. 聚焦线圈 Focusing coils4. 偏向线圈 Deflection coils5. 阳极接点 Anod…...

编程日记 2025/1/9 22:46:03

公司外贸网站建设/手机域名访问网站怎么进入

21&#xff0e;改变窗口尺寸&#xff0c;应将鼠标放在( )A、窗口内任一位置 B、窗口四角或四边 C、窗口标题栏 D、窗口滚动条22&#xff0e;Word菜单命令旁“… ”表示( )A、该命令当前不能执行 B、可按“…”不执行该命令C、21&#xff0e;改变窗口尺寸&#xff0c;应将鼠标放…...

编程日记 2025/1/9 17:40:07

网站建设怎么制作网站/镇江网站建设企业

2019独角兽企业重金招聘Python工程师标准>>> //初始化textfield并设置位置及大小 UITextField *text [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, 30)]; //设置边框样式&#xff0c;只有设置了才会显示边框样式 text.borderStyle UITextBorderS…...

编程日记 2025/1/9 17:20:59

微信网站制作北京/seo关键字优化价格

一、通过环境变量设置 apiVersion: v1 kind: Pod metadata:name: pod-env-tz spec:containers:- name: ngximage: nginx:latestimagePullPolicy: IfNotPresentenv:- name: TZvalue: Asia/Shanghai 二、通过挂载主机时区文件设置 apiVersion: extensions/v1beta1 kind: Deployme…...

编程日记 2025/1/9 16:58:40

dw网站结构图怎么做/seo黑帽培训

模块式pyth1.on组织代码的基本方式一个python脚本可以单独运行&#xff0c;也可以导入另一个脚本中运行&#xff0c;当脚本被导入运行时&#xff0c;我们将其称为模块(module)所有的点p为文件都可以作为一个模块导入模块名与脚本的文件名相同&#xff0c;例如我们编写了一个名为…...

编程日记 2025/1/9 16:12:06