浏览器svg插件_Archer-svgs: 异步加载svg方案
Github地址: ShanaMaid/archer-svgs
哇哦!无限的svgs!你可以使用
archer-svgs
去异步加载svg并将它缓存在localStorage
里,当你再次使用已经加载过的svg时将不需要再发起http请求。将svgs从你的js-bunlde里移除,并且永远减小js-bunlde的体积。(例子: 不需要因为1kb
的svg更新而重新加载整个100kb
的svg模块。)
如果你觉得这个项目还不错,可以给我一个star
和follow
来支持我
ps:archer命名取自fate里面archer的技能无限剑制
在线示例
安装
npm
npm install archer-svgs
yarn
yarn add archer-svgs
特性
- 使用
TypeScript
进行, 提供d.ts
文件提高开发效率。 - 异步加载
svg
- 缓存
svg
在localstorage
或者disk-cache
- 已经缓存
svg
在再次使用的时候不用发起http
请求 - 体积小
- 预加载
svg
设计思路
配置初始化
预加载
兼容性
archer-svgs
基于fetch
和localStorage
.针对fetch
, 采用了 whatwg-fetch去做兼容!换句话说, 只要你的浏览器支持 xhr
和localStorage
,你就可以使用它!他们的兼容性如下图所示:
方法
init()
必须先调用 init()
,然后才能使用其它的Archer
方法!
import Archer from 'archer-svgs';Archer.init({svgs: {'ios-airplane': {url: 'https://unpkg.com/ionicons@4.4.2/dist/ionicons/svg/ios-airplane.svg',version: 1,},'md-airplane': {url: 'https://unpkg.com/ionicons@4.4.2/dist/ionicons/svg/md-airplane.svg',version: 1,cache: false,},}
})
config - paramas
export interface IConfig {svgs: ISVG;
}export interface ISVG {[index: string]: {version: number | string; // svg versionurl: string; // svg urlcache?: boolean; // default: true. false: not cache svg in localStorage }
}
startPrefetch()
startPrefetch
会对config
中的svg
进行预加载!当你调用svg
的时候将大大提高使用速度。
原因: - disk cache - localStorage cache
import Archer from 'archer-svgs';Archer.init(...);
Archer.startPrefetch();
downloadSvg()
params
是config.svgs
的key
, 这个方法将返回svg
的内容。
import Archer from 'archer-svgs';Archer.init({svgs: {'ios-airplane': {url: 'https://unpkg.com/ionicons@4.4.2/dist/ionicons/svg/ios-airplane.svg',version: 1,},}
})console.log(Archer.downloadSvg('ios-airplane'));
result:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M407.7 224c-3.4 0-14.8.1-18 .3l-64.9 1.7c-.7 0-1.4-.3-1.7-.9L225.8 79.4c-2.9-4.6-8.1-7.4-13.5-7.4h-23.7c-5.6 0-7.5 5.6-5.5 10.8l50.1 142.8c.5 1.3-.4 2.7-1.8 2.7L109 230.1c-2.6.1-5-1.1-6.6-3.1l-37-45c-3-3.9-7.7-6.1-12.6-6.1H36c-2.8 0-4.7 2.7-3.8 5.3l19.9 68.7c1.5 3.8 1.5 8.1 0 11.9l-19.9 68.7c-.9 2.6 1 5.3 3.8 5.3h16.7c4.9 0 9.6-2.3 12.6-6.1L103 284c1.6-2 4.1-3.2 6.6-3.1l121.7 2.7c1.4.1 2.3 1.4 1.8 2.7L183 429.2c-2 5.2-.1 10.8 5.5 10.8h23.7c5.5 0 10.6-2.8 13.5-7.4L323.1 287c.4-.6 1-.9 1.7-.9l64.9 1.7c3.3.2 14.6.3 18 .3 44.3 0 72.3-14.3 72.3-32S452.1 224 407.7 224z"/></svg>
clearSvgCache()
清理掉localStorage
中svg
的缓存。
import Archer from 'archer-svgs';Archer.clearCache();
setMaxSize()
设置localStorage
中svg
的缓存最大值,单位是kb
。
import Archer from 'archer-svgs';Archer.setMaxSize(1024); // 1024kb
setMax()
设置localStorage
中svg
的缓存数量。
import Archer from 'archer-svgs';Archer.setMax(10); // 你可以在loaclStorage中缓存10个svg
fetchSvg()
通过url
加载svg
。
import Archer from 'archer-svgs';const svg = Archer.fetchSvg('https://unpkg.com/ionicons@4.4.2/dist/ionicons/svg/ios-airplane.svg')console.log(svg);
result:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M407.7 224c-3.4 0-14.8.1-18 .3l-64.9 1.7c-.7 0-1.4-.3-1.7-.9L225.8 79.4c-2.9-4.6-8.1-7.4-13.5-7.4h-23.7c-5.6 0-7.5 5.6-5.5 10.8l50.1 142.8c.5 1.3-.4 2.7-1.8 2.7L109 230.1c-2.6.1-5-1.1-6.6-3.1l-37-45c-3-3.9-7.7-6.1-12.6-6.1H36c-2.8 0-4.7 2.7-3.8 5.3l19.9 68.7c1.5 3.8 1.5 8.1 0 11.9l-19.9 68.7c-.9 2.6 1 5.3 3.8 5.3h16.7c4.9 0 9.6-2.3 12.6-6.1L103 284c1.6-2 4.1-3.2 6.6-3.1l121.7 2.7c1.4.1 2.3 1.4 1.8 2.7L183 429.2c-2 5.2-.1 10.8 5.5 10.8h23.7c5.5 0 10.6-2.8 13.5-7.4L323.1 287c.4-.6 1-.9 1.7-.9l64.9 1.7c3.3.2 14.6.3 18 .3 44.3 0 72.3-14.3 72.3-32S452.1 224 407.7 224z"/></svg>
更多相关内容请访问
ShanaMaid/archer-svgsgithub.com
浏览器svg插件_Archer-svgs: 异步加载svg方案相关推荐
- 请给出异步加载js方案
请给出异步加载js方案,不少于两种 默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很 ...
- 7.JavaScript异步加载与加载时间线
JavaScript异步加载与加载时间线 上一篇 JavaScript浅层克隆和深层克隆 下一篇 JavaScript事件处理模型 - 事件冒泡,捕获 文章目录 JavaScript异步加载与加载时间 ...
- ajax右侧刷新加载jsp,jsp实现局部刷新页面、异步加载页面的方法
jsp实现局部刷新页面.异步加载页面的方法 局部刷新页面.异步加载页面方案: 1.在jsp页面需要刷新的地方增加一个控件 2.新建一个jsp页面:aaa.jsp(用来放置需要刷新的内容) 3.将id为 ...
- JAVA 异步加载数据模式
JAVA 异步加载数据模式 本片文章将实现一个简单的异步加载数据方案: //数据接口 public interface Data{public String getData(); } //真实数据 p ...
- Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
- js如何使浏览器允许脚本异步加载
js如何使浏览器允许脚本异步加载 如果脚本体积很大,下载和执行的时间就会很长,因此造成浏览器堵塞,用户会感觉到浏览器"卡死"了,没有任何响应.这显然是很不好的体验,所以浏览器允许脚 ...
- 浏览器渲染阻塞与优化-详解推迟加载、异步加载。
我认为一个前端工程师是否优秀,很大程度上取决于对前端性能上优化的功力.所以性能优化对前端真的很重要!!! 本文介绍了什么是阻塞.为什么会阻塞?阻塞优化常用的5种方式以及他们的注意事项. 浏览器渲染阻塞 ...
- 浏览器异步加载和同源策略
静态页面 在浏览器脚本的概念没有出现之前,所有的网页都是静态的.我们知道浏览器的工作模式是: 浏览器向网站服务器发起请求 网站接受浏览器的请求,返回一些字符串(比如一些组成页面的 HTML 字符串) ...
- 使用jOrgChart插件, 异步加载生成组织架构图
项目要做组织架构图,要把它做成自上而下的树形结构,于是决定 (1)通过后台查询数据库,生成树形数组结构,返回到前台. (2)使用jOrgChart插件,根据返回的数据将其子节点加入到相应的<li ...
最新文章
- California Dreaming
- pr导入html文件,视频怎么导入Premiere啊?
- 学习 Message(3): 响应 WM_LBUTTONDOWN 消息
- 14、使用play搭建一个web应用用例
- python请输入你的名字_实现《你的名字》同款滤镜,python+opencv
- [转载] java(三)对象的序列化与static、final关键字
- ROS笔记(28) Setup Assistant
- 微课系列(6):Python关键字else的三种用法
- 【转】详解JavaScript中的this指针
- mysql可视化工具选型
- 两个平面之间的关系—平行、垂直、相交
- lomboz连接mysql数据库_Lomboz如何配置Tomcat数据库连接池
- 推荐七个逆天神器APP,让你分分秒秒变优秀
- 关于Java堆栈的理解与说明
- eaxsinbx_二次微分方程的通解
- 【iOS】崩溃收集和解析
- 基于echarts 24种数据可视化展示,填充数据就可用,动手能力强的还可以DIY(演示地址+下载地址)
- kivy android wifi,Kivy / Buildozer VM Ubuntu不能连接到网络的问题解决
- Gibbs Sampling(吉布斯采样)
- Mysql存储引擎Innodb的读写锁、行级锁