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 ...
随机推荐
- Qt:使用SqlQuery进行查询时size总是-1
原因:SQL语句没有符合格式,特别是在换行写一个SQL语句时,不同行之间没有写空格
- broken pipe 报错分析和解决办法
参考资料: 1.博客1:https://blog.csdn.net/qq_37535749/article/details/113781338 2.博客2:https://blog.csdn.net/ ...
- tp5 Redis缓冲的设置与清除
控制器代码: //设置缓冲的方法 public function order() { $word = input('word');//接受搜索值 //题意:将订单数据使用redis进行缓存中,第二次读 ...
- MySQL Performance Schema详解
MySQL的performance schema 用于监控MySQL server在一个较低级别的运行过程中的资源消耗.资源等待等情况. 1 performance schema特点 提供了一种在数据 ...
- 把EI科技 【载谈 Binomial Sum】 用人话说出来
这个科技是用来 \(O(k+\log n)\) 求 \(\sum_{i=0}^n [x^i] f(x)p^i(x) \mod x^{k+1}\) 这个多项式的某些项数的线性组合 不过我只见过求第 $ ...
- freeswitch tts_commandline模块介绍
概述 freeswitch是开源.免费的VOIP软交换平台,自带了很多功能各异的模块. mod_tts_commandline模块,本身没有TTS能力,而是通过调用TTS引擎的命令生成语音文件,tts ...
- C++设计模式 - 迭代器模式(Iterator)
数据结构模式 常常有一-些组件在内部具有特定的数据结构,如果让客户程序依赖这些特定的数据结构,将极大地破坏组件的复用.这时候,将这些特定数据结构封装在内部,在外部提供统一的接口,来实现与特定数据结构无 ...
- springWeb——Servlet
6.1.Servlet简介 servlet是sun公司开发动态web的一门技术 sum在这些API中提供了一个接口叫做:Servlet.开发的两个步骤: 编写一个类,实现Servlet接口 把开发好的 ...
- php——字符串的""和null,empty的关系
public function test(){ $test = ""; if($test==null){ echo "test==null <hr>" ...
- notepad++给每一列数据加单引号及逗号结尾
原始数据: 对列操作--先加前引号(光标放在第一行哦):编辑-->列块编辑 再加后引号和逗号(文本尾端不齐,就用替换): 打开替换窗口:ctrl+F(其实就是查找) 加完引号和逗号效果:(如果最 ...