isplib
v0.1.17-beta-fix-8
Published
Snippets written in JavaScript. Majorly for our website.
Downloads
27
Readme
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。