前端使用cache storage实现远程图片缓存

Cache Storage 的主要特点和用途

  1. 缓存网络资源:可以将经常访问的网络资源缓存到 Cache Storage 中,以提高网页加载速度,减少网络请求。
  2. 离线访问:当用户处于离线状态时,可以使用 Cache Storage 中的缓存资源来加载网页内容,提供更好的离线访问体验。
  3. 优先级控制:可以通过设置缓存的优先级,确保重要资源优先缓存,而不会占用过多的存储空间。

效果

网页中的图片首次加载时会将图片blob文件存储到cache,网页刷新图片优先从cache缓存中读取,不会再次从服务器请求
作者:__sgf__
链接:https://www.nowcoder.com/discuss/516278915950735360
来源:牛客网
[^1]: [mermaid语法说明](https://mermaidjs.github.io/)

<template><div><img :src="src" :style="style"/></div>
</template>
<script>
import req from '@/request.js';
export default {name: 'eip-img',props: ['isDisplay', 'imgSrc', 'fileJson', 'imgHeight', 'imgWidth', 'urlSetting'],data() {return {src: '',style: {},};},computed: {},created() {this.testCache()if (this.imgHeight > 0 && this.imgWidth > 0) {this.style = {height: this.imgHeight + 'px',width: this.imgWidth + 'px',};}},methods: {async testCache(){let _this = this;if (this.isDisplay) {if (this.fileJson) {var json = JSON.parse(this.fileJson);let id = json[0].id;var cacheName = 'eipimg'  // 定义cache名称var path = window.context.portal + '/file/onlinePreviewController/v1/getFileById_' + id  // 定义路径var cachesMatch = await caches.match(path) // 匹配当前路径var cachesLocal = await caches.has(cacheName)//如果当前已有数据则直接获取缓存的数据if(cachesMatch && cachesLocal){caches.match(path).then(res => {return res.text()}).then(res => {// console.log("获取cache数据: ", res)_this.src = res})}else{// 如果没有则获取远程数据req.get(path, 'arraybuffer').then(response => {var reader = new window.FileReader();reader.readAsDataURL(new Blob([response.data])); reader.onloadend = function() {_this.src = reader.result// 将请求的数据保存在caches中caches.open(cacheName).then(cache => {cache.put(path, new Response(reader.result, { status: 200 }))})}});}}} else {this.src = this.imgSrc;}}}
};
</script>
<style lang="stylus" scoped>
div[aria-invalid='true'] >>> .el-input__inner, div[aria-invalid='true'] >>> .el-input__inner:focus {border-color: #f56c6c;
}
</style>

调用

<eip-img  isDisplay="true" imgSrc="" :imgHeight='60' :imgWidth='60' :fileJson='`[{"id": "${item.id}"}]`' />

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

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

相关文章

【系统设计】12306架构设计难点(下)

欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术的推送&#xff01; 在我后台回复 「资料」 可领取编程高频电子书&#xff01; 在我后台回复「面试」可领取硬核面试笔记&#xff01; 文章导读地址…

实现两栏布局和三栏布局的多种详细方法

目录 一、背景两栏布局三栏布局 二、两栏布局flex弹性布局 三、三栏布局两边使用 float&#xff0c;中间使用 margin两边使用 absolute&#xff0c;中间使用 margin两边使用 float 和负 margin使用 display: table 实现使用flex实现grid网格布局 参考文献 一、背景 在日常布局…

永磁同步电机速度环闭环控制

文章目录 1、速度环分析2、电机参数3、PI计算4、模型仿真4.1 模型总览4.2 实际转速与参考转速对比4.3 转矩波形4.4 相电流采样波形 模型下载地址&#xff1a; 链接: 速度闭环模型&#xff08;速度电流双闭环&#xff09; 1、速度环分析 2、电机参数 Udc24 V Rs0.6 LdLq1.4e-3…

【2024美国大学生数学建模竞赛】2024美赛C题 问题分析、数学模型、实现代码、完整论文

【2023美国大学生数学建模竞赛】2024美赛C题 问题分析、数学模型、实现代码、完整论文 引言 题目将于2024年2月2日6:00发布。我们团队将会在8点前准时更新问题分析&#xff0c;逐步更新数学模型和实现代码&#xff0c;最后发布完整的论文。 更新进展&#xff1a; &#xff08;…

Java开发常用框架:效率框架、测试框架、日志框架、安全框架总结

目录 1、Java效率框架 1.Lombox 2.MapStruct 2、测试框架 1.JUnit 2.TestNG 3、日志框架 1.Log4j 2.SLF4J 4、安全框架 1.Spring Security 2.Apache Shiro 1、Java效率框架 常见Java效率框架&#xff1a;Lombox、MapStruct等。 1.Lombox Lombox和MapStruct都是常见…

docker导出conda环境的流程

要在 Docker 中导出 Conda 环境&#xff0c;需要创建一个 Docker 镜像&#xff0c;该镜像包含 Conda 环境。 步骤如下&#xff1a; 创建 Conda 环境并导出环境文件&#xff1a; 首先&#xff0c;在本地机器上创建一个 Conda 环境。 然后使用 conda env export > environme…

【算法】Partitioning the Array(数论)

题目 Allen has an array a1,a2,…,an. For every positive integer k that is a divisor of n, Allen does the following: He partitions the array into n/k disjoint subarrays of length k. In other words, he partitions the array into the following subarrays: [a1,…

【Redis】签到点赞和UV统计

Redis签到点赞和UV统计 点赞 点赞功能分析 需求&#xff1a; 同一个用户只能点赞一次&#xff0c;再次点击则取消点赞如果当前用户已经点赞&#xff0c;则点赞按钮高亮显示&#xff08;前端判断字段isLike属性&#xff09; 实现步骤&#xff1a; 利用Redis的set集合判断是…

关于修改数据库服务器时间导致达梦数据库集群裂开

故障原因&#xff1a; 因为每天数据库服务器时间都不一致&#xff0c;想要给数据库服务器配置个NTP服务器。结果导致达梦数据库裂库。后面查看了达梦系统管理员手册了解了达梦集群的机制&#xff0c;知道数据库服务器时间需要先关闭数据库服务之后才可以修改数据库服务器时间。…

五款颠覆工作方式的工作软件

在当今快节奏的工作环境中&#xff0c;选择合适的工作软件是提高效率、实现协作的关键。感谢你的提问&#xff0c;下面我将为你介绍五款令人赞叹的工作软件&#xff0c;它们会让你的工作变得更有趣而富有成效&#xff01; 1. 亿可达 是我最近在用的一款软件连接器&#xff0c…

ubuntu16.04环境轻松安装和应用opencv4.9.0(基于源码编译)

目录 一、环境准备 1、安装cmake 2、安装依赖 3、从github上下载opencv4.9.0.zip 二、安装opencv4.9.0 1、解压4.9.0.zip 2、进入build目录编译 3、安装编译好的相关库 4、修改opencv配置文件并使其生效 5、添加PKG_CONFIG路径&#xff0c;并使其生效 三、opencv环境…

聚道云软件连接器:连接薪人薪事与携程商旅的桥梁,出差管理效率的新篇章

客户介绍 某科技有限公司是一家专注于提供数字化解决方案的高科技企业。公司拥有一支由业内资深专家和优秀工程师组成的团队&#xff0c;致力于为企业提供全方位的数字化服务。该公司拥有自主研发能力&#xff0c;拥有多项知识产权和专利技术&#xff0c;确保为客户提供技术领…

2024美赛数学建模A题思路源码

比赛当天第一时间更新&#xff01; 赛题目的 赛题目的&#xff1a; 问题描述&#xff1a; 解题的关键&#xff1a; 问题一. 问题分析 问题解答 问题二. 问题分析 问题解答 问题三. 问题分析 问题解答 问题四. 问题分析 问题解答 问题五. 问题分析 问题解答

数值函数

目录 四舍五入操作 测试四舍五入 截取小数(所有的小数都不进位) 求模(求余数) 求模操作 Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 数值函数可以对数字进行处理&#xff0c;常用的主要函数有 3 个&#xff1a; round()、trunc…

力扣刷题-169.多数元素

给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1&#xff1a; 输入&#xff1a;nums [3,2,3] 输出&#xff1a;3 示例 …

Aigtek大功率信号源怎么使用的

大功率信号源是在实验室、测试和通信系统中经常使用的重要设备。它能够提供高功率的信号&#xff0c;用于驱动各种设备和系统。在使用大功率信号源时&#xff0c;有一些关键的步骤和指南&#xff0c;可以确保安全、有效地操作设备并获得稳定的输出。本文将详细介绍大功率信号源…

docker-compose部署开源培训系统playedu

docker-compose 安装 本文安装过程需要您准备以下环境&#xff1a; Dockerdocker-compose 第一步、下载 playedu-docker-compose 仓库 git clone -b 1.5.1 https://gitee.com/playeduxyz/compose.git playedu-docker-compose第二步、构建镜像 下面命令 # 开头的是对下一行命…

DevOps落地笔记-05|非功能需求:如何有效关注非功能需求

上一讲主要介绍了看板方法以及如何使用看板方法来解决软件研发过程中出现的团队过载、工作不均、任务延期等问题。通过学习前面几个课时介绍的知识&#xff0c;你的团队开始源源不断地交付用户价值。用户对交付的功能非常满意&#xff0c;但等到系统上线后经常出现服务不可用的…

C程序设计(第5版)谭浩强习题解答 第6章 利用数组处理批量数据

C程序设计(第5版)谭浩强习题解答 第6章 利用数组处理批量数据 1.用筛选法求100之内的素数 #include <stdio.h> #include <math.h> int main() {int i, j, n, a[101];for (i 1; i < 100; i)a[i] i;a[1] 0;for (i 2; i < sqrt(100); i)for (j i 1; j …

笔记--扩展欧几里得算法

AcWing.877.欧几里得算法 给定 n n n 对正整数 a a ai, b b bi&#xff0c;对于每对数&#xff0c;求出一组 x x xi, y y yi&#xff0c;使其满足 a a ai x x xi b b bi y y yi g c d ( a gcd(a gcd(ai , b ,b ,bi ) ) )。 输入格式 第一行包含整数 n n n。 接下来 …