一个不到 1kb 的 image placeholder 的 js 库

jasperyang 发布于2019-08-19 17:14 / 1434人阅读

摘要：一个库，用于在浏览器端生成，提供完善的配置和简单的方法。获得元素可以直接插入到结构中。是客户端生成，大名鼎鼎，但是在用到网页上，动态图片的时候，它的那种风格用起来不太方便。待完成更多的灵活配置。作为浏览器端的库，尽可能的压缩大小。

image-placeholder.js

一个Javascript库，用于在浏览器端生成placeholder image，提供完善的配置和简单的方法。EN-Readme

Github：https://github.com/hustcc/placeholder.js

预览

官方网站示例

特点

不依赖任何 js 框架，比如 jq

小于 1k ，具体是0.98k，增加img配置方式之后，为1.52kb

配置项多，都有默认值

使用简单

使用

引入 placeholder.js 到你的前段代码中:

1. 调用placeholder.js的方法进行替换，举个例子如下:

或者携带参数options:

请注意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 to size.

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。

云服务器 GPU云服务器 js的des库 js 把一个数组的值 js一个数据的饼图 js找一个元素的爸爸

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78331.html

看完你也想编写自己的 react 插件

摘要：清楚自己想要什么样的组件，就自己动手撸呗。咱们先来看看它的效果吧如果大家有时间，窝还是鼓励大家自己动手实现一些小插件。于是自己就琢磨能否继承使用方法同时保持特有组件特性。需要确保已安装。副标题----为什么我要写这个 react 插件图片懒加载是项目中常用的功能，然而现有 react 懒加载组件库，用着都不是很爽了 ?。概括一下有如下几点：没有只针对 image 懒加载组件。多...

Vixb 2019-08-30 14:06 评论0 收藏0
看完你也想编写自己的 react 插件

摘要：清楚自己想要什么样的组件，就自己动手撸呗。咱们先来看看它的效果吧如果大家有时间，窝还是鼓励大家自己动手实现一些小插件。于是自己就琢磨能否继承使用方法同时保持特有组件特性。需要确保已安装。副标题----为什么我要写这个 react 插件图片懒加载是项目中常用的功能，然而现有 react 懒加载组件库，用着都不是很爽了 ?。概括一下有如下几点：没有只针对 image 懒加载组件。多...

zhou_you 2019-08-22 15:13 评论0 收藏0
看完你也想编写自己的 react 插件

摘要：清楚自己想要什么样的组件，就自己动手撸呗。咱们先来看看它的效果吧如果大家有时间，窝还是鼓励大家自己动手实现一些小插件。于是自己就琢磨能否继承使用方法同时保持特有组件特性。需要确保已安装。副标题----为什么我要写这个 react 插件图片懒加载是项目中常用的功能，然而现有 react 懒加载组件库，用着都不是很爽了 ?。概括一下有如下几点：没有只针对 image 懒加载组件。多...

xingpingz 2019-08-01 18:40 评论0 收藏0