[推荐]一个 1kb 的image placeholder的js库
2019独角兽企业重金招聘Python工程师标准>>>
image-placeholder.js
一个Javascript库,用于在浏览器端生成placeholder image
,提供完善的配置和简单的方法。EN-Readme
预览
官方网站示例
特点
- 不依赖任何 js 框架,比如 jq
- 小于 1k ,具体是
0.98k
,增加img配置方式之后,为1.52kb
- 配置项多,都有默认值
- 使用简单
使用
引入 placeholder.js 到你的前段代码中:
<script src="placeholder.js"></script>
1.
调用placeholder.js的方法进行替换,举个例子如下:
<img src="data:image_origin.png" onerror="this.src=placeholder.getData({text: 'Image 404'})">
2.
使用URL参数的方式配置Img的属性options,例如:
<img class="placeholder" />
或者携带参数options:
<img options="size=256x128&text=Hello!" class="placeholder" />
请注意img标签的class属性必须placeholder。
Placeholder 配置项
Placeholder 配置项用于API方法的输入参数, e.g. placeholder.getData({text: 'Image 404'})
. 或者作为URL参数样式作为img的属性配置, e.g. options="size=256x128&text=Hello!"
size
: placeholder图片尺寸. 例如:256x128
, 默认:128x128
.bgcolor
: 背景颜色. 例如:#969696
. 默认:random
.color
: 前景颜色,文字颜色. 例如:#ccc
. 默认:random
.text
: 自定义文本内容. 例如:Hello World, 你好
. 默认: equal tosize
.fstyle
: 字体样式. 可以是normal / italic / oblique
. 默认:oblique
.fweight
: 字体weight. 可以是normal / bold / bolder / lighter / Number
. 默认:bold
.fsize
: 字体大小. 默认:自动
计算字体大小防止文字超出图片大小.ffamily
: 字体. 默认:consolas
.
具体参数配置例子:
var opts = {size: '512x256',bgcolor: '#ccc', color: '#969696',text: 'Hello World, 你好',fstyle:'oblique',fweight: 'bold',fsize:'40',ffamily: 'consolas'
}
console.log(placeholder.getData(opts)) //get the base64 of the placeholder image.
作为img的options属性为:
size=256x128&text=Hello!&bgcolor=#ccc&color=#969696&fstyle=oblique&fweight=bold&fsize=40&ffamily=consolas
Placeholder 方法
placeholder.getData(opts)
: 获得placeholder图片的base64字符串,可以直接在img标签的src属性中使用,或者在css的背景中使用。placeholder.getCanvas(opts)
: 获得canvas元素, 可以直接插入到DOM结构中。
为什么要造轮子
- 很多 image placeholder 都是在服务端生成,需要额外搭建服务以及耗费资源。
- imsky/holder是客户端生成,大名鼎鼎,但是在用到网页上,动态图片的时候,它的那种风格用起来不太方便。
- 其他的 image placeholder 太大了,比如上面提到的 holder 压缩之后还有 30k 以上,其实
不太使用在网页上使用
。
待完成
- 更多的灵活配置。
- 作为浏览器端的js库,尽可能的压缩大小。
其他
任何问题欢迎反馈和 pr ,代码非常简单,相信 1 分钟你就可以看懂,非常欢迎push request
。
转载于:https://my.oschina.net/wzwahl36/blog/547813
[推荐]一个 1kb 的image placeholder的js库相关推荐
- GitBook是一个命令行工具(Node.js库),我们可以借用该工具使用Github/Git和Markdown来制作精美的图书,但它并不是一本关于Git的教程哟。...
GitBook是一个命令行工具(Node.js库),我们可以借用该工具使用Github/Git和Markdown来制作精美的图书,但它并不是一本关于Git的教程哟. 支持输出多种格式 GitBook支 ...
- 极力推荐一个简单好用的C++JSON库
极力推荐一个简单好用的C++JSON库CJsonObject,让使用json如使用C++原生的结构体那般方便,随心所欲.CJsonObject是个优秀的C++JSON库,也许会是你见过的最为简单易 ...
- 开源:推荐一个不错的离线IP地址定位库
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 来源 | https://gitee.com/lions ...
- 服务器系统goha,推荐一个轻量级且高性能的 Golang 网络库:gnet-Go语言中文社区...
image Github 主页 博客原文 欢迎大家围观~~,目前还在持续更新,感兴趣的话可以 star 一下暗中观察哦. 简介 gnet 是一个基于 Event-Loop 事件驱动的高性能和轻量级网络 ...
- linux 高性能网络库,推荐一个轻量级且高性能的 Go 网络库:gnet
gnet 是一个基于 Event-Loop 事件驱动的高性能和轻量级网络库.这个库直接使用 epoll 和 kqueue 系统调用而非标准 Golang 网络包:net 来构建网络应用,它的工作原理类 ...
- 推荐一个Python GUI神器,双手彻底解放!
今天给大家推荐一个非常牛X的Python GUI库,PySimpleGUI 可以说,有了它双手真的彻底解放了,做个GUI分分钟就能搞定. ▍什么是PySimpleGUI? PySimpleGUI是一个 ...
- 网络拓扑abor.js库---力导向
arbor是一个画动态连接图的js库. 效果截图如下: 项目地址:http://arborjs.org/ 一个使用它动态扩展的例子:http://nooshu.com/explore/arbor-vi ...
- uni-app框架+app端+ethers.js库+以太坊开发+常见错误
uni-app框架常见错误解决方案: app端如果不使用兼容的ethers.js库,uni-app框架会报错: * reportJSException > ...
- Unity中通过Jint调用js库
在最近的一个项目中遇到了一个需求,一个现有的加密解密的库是Javascript写的,且已经用到了服务器代码中,所以我这边客户端这边有两个选择: "翻译"过来,将JS库中的代码用** ...
- bpm js 计算 音乐_推荐一个能检测歌曲bpm的插件
大家好啊.我是reaper音频群里的peter. 让我们先来打个广告. 欢迎爱好音频的朋友加入我们的群. 下面上干货. 好多人在做贴唱的时候,有时候需要bpm的辅助.但是状态不好的时候打节拍总是忽快忽 ...
最新文章
- LaTeX入门第二集!LaTeX的几个示例!
- apache 创建多端口监听
- 在Qt调用OpenCV库编写GUI程序
- 【Python进阶】带你使用Matplotlib进行可视化
- 《C和指针》学习备忘
- go mod依赖离线安装_go mod 无法自动下载依赖包的问题
- Oracle多行函数
- dorado7网页api
- 被腾讯看上,叽里呱啦获近亿美元C轮融资
- 软件工程第0次作业 | 热身
- Springboot 统一maper 和逆向工程
- webshell及木马详解
- Vue含表情评论回复组件
- 小猫钓鱼纸牌游戏java_java实现纸牌游戏-小猫钓鱼算法
- Unity初级案例 - 吃豆人(Unity2017.2.0)Day 2
- 13.2 用Patsy创建模型
- RT-thread 柿饼UI demo(文本浏览+电子相册) ---- 暨柿饼入门课第一周作业附加题
- 简单人物画像_简单的素描画人物图片
- 用浏览器访问云服务器文件,浏览器访问云服务器文件
- vue——this.$parent算法