isplib
Snippets written in JavaScript. Majorly for our website.
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 0.1.15
- 0.1.14
- 0.1.13
- 0.1.12
- 0.1.11
- 0.1.10
- 0.1.9
- 0.1.8
- 0.1.7
- 0.1.6
- 0.1.5
- 0.1.4
- 0.1.3
- 0.1.2
- 0.1.1
- 0.1.0
- 0.0.17
- 0.0.16
- 0.0.15
- 0.0.14
- 0.0.13
- 0.0.12
- 0.0.11
- 0.0.10
- 0.0.9
- 0.0.8
- 0.0.7
- 0.0.6
- 0.0.5
- 0.0.4
- 0.0.3
- 0.0.2
- 0.0.1
- 0.0.0
- 0.1.17-beta-fix-8
- 0.1.17-beta-fix-7
- 0.1.17-beta-fix-6
- 0.1.17-beta-fix-5
- 0.1.17-beta-fix-4
- 0.1.17-beta-fix-2
- 0.1.17-beta-fix-1
- 0.1.17-beta-fix-0
- 0.1.17-beta
- 0.1.17-alpha-fix-9
- 0.1.17-alpha-fix-8
- 0.1.17-alpha-fix-7
- 0.1.17-alpha-fix-6
- 0.1.17-alpha-fix-5
- 0.1.17-alpha-fix-4
- 0.1.17-alpha-fix-3
- 0.1.17-alpha-fix-2
- 0.1.17-alpha-fix-1
- 0.1.17-alpha-fix-0
- 0.1.17-alpha
- 0.1.16-beta-fix-4
- 0.1.16-beta-fix-3
- 0.1.16-beta-fix-2
- 0.1.16-beta-fix-1
- 0.1.16-beta-fix-0
- 0.1.16-beta
- 0.1.16-alpha-fix-6
- 0.1.16-alpha-fix-5
- 0.1.16-alpha-fix-4
- 0.1.16-alpha-fix-3
- 0.1.16-alpha-fix-2
- 0.1.16-alpha-fix-0
- 0.1.16-alpha
- 0.1.15-fix-3
- 0.1.15-fix-2
- 0.1.15-fix-1
- 0.1.15-fix-0
- 0.1.15-beta
- 0.1.15-alpha-fix-5
- 0.1.15-alpha-fix-4
- 0.1.15-alpha-fix-3
- 0.1.15-alpha-fix-2
- 0.1.15-alpha-fix-1
- 0.1.15-alpha-fix-0
- 0.1.15-alpha
- 0.1.14-alpha-fix-1
- 0.1.14-alpha-fix-0
- 0.1.14-alpha
- 0.1.13-beta
- 0.1.13-alpha-fix-4
- 0.1.13-alpha-fix-3
- 0.1.13-alpha-fix-2
- 0.1.13-alpha-fix-1
- 0.1.13-alpha-fix-0
- 0.1.13-alpha
- 0.1.12-fix-0
- 0.1.3-fix-1
- 0.1.3-fix-0
- 0.1.2-beta-fix-2
- 0.1.2-beta-fix-1
- 0.1.2-beta-fix-0
- 0.1.2-beta
- 0.1.2-alpha
- 0.0.17-beta
- 0.0.17-alpha-fix-0
- 0.0.17-alpha
- 0.0.16-fix-0
- 0.0.16-beta-fix-1
- 0.0.16-beta-fix-0
- 0.0.16-beta
- 0.0.16-alpha-fix-9
- 0.0.16-alpha-fix-8
- 0.0.16-alpha-fix-7
- 0.0.16-alpha-fix-6
- 0.0.16-alpha-fix-5
- 0.0.16-alpha-fix-4
- 0.0.16-alpha-fix-3
- 0.0.16-alpha-fix-2
- 0.0.16-alpha-fix-10
- 0.0.16-alpha-fix-1
- 0.0.16-alpha-fix-0
- 0.0.16-alpha
- 0.0.14-fix-0
- 0.0.13-beta
- 0.0.13-alpha-fix-1
- 0.0.13-alpha-fix-0
- 0.0.13-alpha
- 0.0.11-beta-fix-0
- 0.0.11-beta
- 0.0.11-alpha-fix-3
- 0.0.11-alpha-fix-2
- 0.0.11-alpha-fix-1
- 0.0.11-alpha-fix-0
- 0.0.11-alpha
- 0.0.10-beta
- 0.0.10-alpha-fix-7
- 0.0.10-alpha-fix-6
- 0.0.10-alpha-fix-5
- 0.0.10-alpha-fix-4
- 0.0.10-alpha-fix-3
- 0.0.10-alpha-fix-2
- 0.0.10-alpha-fix-1
- 0.0.10-alpha-fix-0
- 0.0.10-alpha
- 0.0.8-beta
- 0.0.8-alpha-fix-0
- 0.0.8-alpha
- 0.0.6-fix-1
- 0.0.6-fix-0
- 0.0.5-beta-fix-4
- 0.0.5-beta-fix-3
- 0.0.5-beta-fix-2
- 0.0.5-beta-fix-1
- 0.0.5-beta-fix-0
- 0.0.5-beta
- 0.0.5-alpha
- 0.0.4-fix-0
- 0.0.3-alpha
- 0.0.2-beta
- 0.0.2-alpha
- 0.0.1-beta-fix-0
- 0.0.1-beta
- 0.0.1-alpha-fix-9
- 0.0.1-alpha-fix-8
- 0.0.1-alpha-fix-7
- 0.0.1-alpha-fix-6
- 0.0.1-alpha-fix-5
- 0.0.1-alpha-fix-4
- 0.0.1-alpha-fix-3
- 0.0.1-alpha-fix-2
- 0.0.1-alpha-fix-1
- 0.0.1-alpha-fix-0
- 0.0.1-alpha
isplib
The package itself is under
MIT license
, but please note that some of the works cited therein have non-commercial restrictions.
Use it at your own risk. If necessary, you should consult a lawyer.
The document is mostly in zh_CN
. However, you can use Google Translate to translate it into other languages.
这是个工具集,平时写的各种小物件都会放进来。由于主要供内部使用,代码 / 项目管理可能不是很规范,见谅。
图片加载器
简介
风景图 / 动漫图。可以作为网页背景。
使用方法
建议您将
latest
替换成具体的版本号,以免哪天我们进行瞎改不兼容更改,给您增加工作量。
建议从 jsDelivr
加载这个文件(在中国大陆有节点,速度不错)
<script async src="https://cdn.jsdelivr.net/npm/isplib@latest/loadImage.js"></script>
或者 UNPKG
(如果你的访客主要来自中国大陆,建议不要使用 UNPKG
,因为部分地区 / 运营商可能出现无法连接到 Cloudflare
的情况)
<script async src="https://unpkg.com/isplib@latest/loadImage.js"></script>
知乎
(有时候会跳转到旧版,并且似乎没有清除节点缓存的功能)
<script async src="https://unpkg.zhimg.com/isplib@latest/loadImage.js"></script>
饿了么
(有时候会提供旧版,并且似乎没有清除节点缓存的功能)
<script async src="https://npm.elemecdn.com/isplib@latest/loadImage.js"></script>
特性
默认情况下,它会修改 document.body
的背景,不会定时轮换图片,并且添加高斯模糊效果。
可以通过给 window._place
赋值来修改图片的位置。
const imgPlace = document.getElementById('example');
window._place = imgPlace;
// or
const divName = 'example';
window._place = divName;
可以通过给 window._slide
赋值,使得图片定时轮换。
window._slide = true;
// or
window._slide = 1;
通过给 window._blurType
赋值来调整高斯模糊效果
window._blurType = 'back'; // 对元素背景进行高斯模糊 (默认效果)
window._blurType = 'self'; // 对元素自身进行高斯模糊 (当 window._place 指向一个 img 元素时,建议使用该选项)
window._blurType = 'no'; // 禁用高斯模糊
兼容性
理论上来说,这个文件在最新版的 Chrome
/ Firefox
/ Edge
上正常运行。
技术细节
我们使用动态 import()
并异步加载子模块 module.js
/ withCache.js
/ withoutCache.js
。
由于 CacheStorage API
只在 https
环境下可用,写了个 withoutCache.js
供没有 https
环境加载图片。
Analytics
代码主要是从 cfga 那里贺来的,做了些微小的修改。
原 Repo 协议是 MIT License
,作者是 Sukka 大佬。
<script async src="https://cdn.jsdelivr.net/npm/isplib@latest/analytics.js"></script>
Analytics
在页面 load
事件触发时会自动上报数据。你也可以手动调用 window.iga
上报数据。
使用前请设置如下值:
window.ga_api
:Cloudflare Workers
地址(可以从 https://cdn.jsdelivr.net/npm/isplib@latest/analytics/server.js 复制代码)。window.ga_tid
:Google Analytics
账号 ID(形如UA-12345678-0
)。
更多用法参见原项目的 README.md。