预览

官方网站示例项目 github 地址

使用

引入 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 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 结构中。

1kb 的 placeholder.js 增加 img 标签使用方式的更多相关文章

  1. 通过js获得html标签的值

    js获取html元素的值并赋值 1).input文本框 <input type="text" value="时间" placeholder="姓 ...

  2. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  3. 使用JS对HTML标签进行增删改查

    以下为通过JS对li标签进行简单的增删改查: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  4. jquery.placeholder.js的使用

    最近做东西用到placeholder这个属性,可是这个属性在低版本的IE或者QQ浏览器等这些浏览器上这个属性不能生效,后来在网上查了下,发现了jquery的一个插件jquery.placeholder ...

  5. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  6. 网站开发进阶(十八)js获取html标签中的值

    js获取html标签中的值 项目开发过程中,由于需求所迫,需要获取html标签元素中的内容,下面做一简单总结.以下所讲的示例适用于其它标签元素. 主要包括2中方法获取元素内容: 方法一:.innerT ...

  7. js基础--浏览器标签页隐藏或显示状态 visibility详解

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

  8. JQ和Js获取span标签的内容

    JQ和Js获取span标签的内容 html: 1 <span id="content">‘我是span标签的内容’</span> javascript获取: ...

  9. js阻止a标签默认事件的几种方法

    方法/步骤    疑问 打开编辑器,新建html并加入a标签,如图所示,小编想点击a标签时执行pop函数同时禁止a标签的默认的href跳转,该如何阻止呢?  方法一 要阻止a标签跳转,可以改变href ...

随机推荐

  1. MySQL 学习-进阶

    MySQL高级学习 一.MySQL 事务 1.1.事务的概念 一条或多条 SQL 语句组成一个执行单元,其特点是这个单元要么同时成功要么同时失败,单元中的每条 SQL 语句都相互依赖,形成一个整体,如 ...

  2. selenium+python自动化103-一闪而过的dialog如何定位

    前言 web页面操作的时候经常会遇到一闪而过的 dialog 消息,这些提示语一般只出现了几秒,过后元素节点就会在DOM中消失了. 本篇讲解下用chrome 浏览器如何定位一闪而过的 dialog 消 ...

  3. Qt:手动编辑UI文件——This file can only be edited in Design mode

    UI文件是只读文件,正常情况下我们只能在"Design"模式下,通过调整各种控件的方式间接修改它. 但是有时我们遇到许多重复性的工作,比如向某个Combobox中添加一系列的Ite ...

  4. matplotlib.lines.Line2D at 0x328fc10 解决方法

    在plt.plot(Y,X)代码前加一句plt.figure()即可

  5. Spring Cloud Alibaba 2021.0.1.0 发布:版本号再也不迷糊了

    大家好,DD又来了! 3月9日,Spring官方博客发文:Spring Cloud Alibaba 2021.0.1.0发布了. 前段时间DD还在微信群里看到小伙伴吐槽Spring Cloud Ali ...

  6. CMAK(Kafka Manager)安装

    CMAK 是管理Kafka集群的常用工具,之前的名字叫Kafka Manager.CMAK功能很强大,它可以管理多个Kafka集群,查看集群内部状态,如:topic.broker.consumer.p ...

  7. PhpStrom 常用的插件

    .env files support 可以在env函数使用是提示.env文件中所有的key值的自动完成功能 Markdown support 在编写.md文件时有预览的功能 PHP composer. ...

  8. linux查看和替换python软连接

    linux查看和替换python软连接 查看使用的python版本的路径 # which python 这里是在/usr/bin/python 然后查看链接指向, # ls -l /usr/bin/p ...

  9. 如何用 Redis 解决海量重复提交问题

    前言 在实际的开发项目中,一个对外暴露的接口往往会面临很多次请求,我们来解释一下幂等的概念:任意多次执行所产生的影响均与一次执行的影响相同.按照这个含义,最终的含义就是 对数据库的影响只能是一次性的, ...

  10. 配置阿里云RepoForge 镜像

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 一.RepoForge 镜像介绍 Repoforge 是 RHEL 系统下的软件仓库,拥有 10000 多个软件包,被认为是最安全.最稳定的一个软件 ...