isplib

arkjoe
js Styles
isplib JS library on npm Download isplib JS library

Snippets written in JavaScript. Majorly for our website.

Version 0.1.17-beta-fix-8 License MIT
isplib has no homepage
isplib JS library on GitHub
isplib JS library on npm
Download isplib JS library
INSTALL
Type:
Version:
No default files set by the package author so the URLs are guessed. You can always browse all package files to use other ones.

isplib

NPM jsDelivr

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

参见 import - JavaScript | MDN

由于 CacheStorage API 只在 https 环境下可用,写了个 withoutCache.js 供没有 https 环境加载图片。

参见 CacheStorage - Web APIs | MDN

Analytics

代码主要是从 cfga 那里贺来的,做了些微小的修改。

Repo 协议是 MIT License,作者是 Sukka 大佬。

<script async src="https://cdn.jsdelivr.net/npm/isplib@latest/analytics.js"></script>

Analytics 在页面 load 事件触发时会自动上报数据。你也可以手动调用 window.iga 上报数据。

使用前请设置如下值:

更多用法参见原项目的 README.md