1kb 的 placeholder.js 增加 img 标签使用方式
预览
使用
引入 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 结构中。
1kb 的 placeholder.js 增加 img 标签使用方式的更多相关文章
- 通过js获得html标签的值
js获取html元素的值并赋值 1).input文本框 <input type="text" value="时间" placeholder="姓 ...
- Asp.net 后台添加CSS、JS、Meta标签
Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...
- 使用JS对HTML标签进行增删改查
以下为通过JS对li标签进行简单的增删改查: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- jquery.placeholder.js的使用
最近做东西用到placeholder这个属性,可是这个属性在低版本的IE或者QQ浏览器等这些浏览器上这个属性不能生效,后来在网上查了下,发现了jquery的一个插件jquery.placeholder ...
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- 网站开发进阶(十八)js获取html标签中的值
js获取html标签中的值 项目开发过程中,由于需求所迫,需要获取html标签元素中的内容,下面做一简单总结.以下所讲的示例适用于其它标签元素. 主要包括2中方法获取元素内容: 方法一:.innerT ...
- js基础--浏览器标签页隐藏或显示状态 visibility详解
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...
- JQ和Js获取span标签的内容
JQ和Js获取span标签的内容 html: 1 <span id="content">‘我是span标签的内容’</span> javascript获取: ...
- js阻止a标签默认事件的几种方法
方法/步骤 疑问 打开编辑器,新建html并加入a标签,如图所示,小编想点击a标签时执行pop函数同时禁止a标签的默认的href跳转,该如何阻止呢? 方法一 要阻止a标签跳转,可以改变href ...
随机推荐
- MySQL 学习-进阶
MySQL高级学习 一.MySQL 事务 1.1.事务的概念 一条或多条 SQL 语句组成一个执行单元,其特点是这个单元要么同时成功要么同时失败,单元中的每条 SQL 语句都相互依赖,形成一个整体,如 ...
- selenium+python自动化103-一闪而过的dialog如何定位
前言 web页面操作的时候经常会遇到一闪而过的 dialog 消息,这些提示语一般只出现了几秒,过后元素节点就会在DOM中消失了. 本篇讲解下用chrome 浏览器如何定位一闪而过的 dialog 消 ...
- Qt:手动编辑UI文件——This file can only be edited in Design mode
UI文件是只读文件,正常情况下我们只能在"Design"模式下,通过调整各种控件的方式间接修改它. 但是有时我们遇到许多重复性的工作,比如向某个Combobox中添加一系列的Ite ...
- matplotlib.lines.Line2D at 0x328fc10 解决方法
在plt.plot(Y,X)代码前加一句plt.figure()即可
- Spring Cloud Alibaba 2021.0.1.0 发布:版本号再也不迷糊了
大家好,DD又来了! 3月9日,Spring官方博客发文:Spring Cloud Alibaba 2021.0.1.0发布了. 前段时间DD还在微信群里看到小伙伴吐槽Spring Cloud Ali ...
- CMAK(Kafka Manager)安装
CMAK 是管理Kafka集群的常用工具,之前的名字叫Kafka Manager.CMAK功能很强大,它可以管理多个Kafka集群,查看集群内部状态,如:topic.broker.consumer.p ...
- PhpStrom 常用的插件
.env files support 可以在env函数使用是提示.env文件中所有的key值的自动完成功能 Markdown support 在编写.md文件时有预览的功能 PHP composer. ...
- linux查看和替换python软连接
linux查看和替换python软连接 查看使用的python版本的路径 # which python 这里是在/usr/bin/python 然后查看链接指向, # ls -l /usr/bin/p ...
- 如何用 Redis 解决海量重复提交问题
前言 在实际的开发项目中,一个对外暴露的接口往往会面临很多次请求,我们来解释一下幂等的概念:任意多次执行所产生的影响均与一次执行的影响相同.按照这个含义,最终的含义就是 对数据库的影响只能是一次性的, ...
- 配置阿里云RepoForge 镜像
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 一.RepoForge 镜像介绍 Repoforge 是 RHEL 系统下的软件仓库,拥有 10000 多个软件包,被认为是最安全.最稳定的一个软件 ...