预览

官方网站示例项目 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. Qt:使用SqlQuery进行查询时size总是-1

    原因:SQL语句没有符合格式,特别是在换行写一个SQL语句时,不同行之间没有写空格

  2. broken pipe 报错分析和解决办法

    参考资料: 1.博客1:https://blog.csdn.net/qq_37535749/article/details/113781338 2.博客2:https://blog.csdn.net/ ...

  3. tp5 Redis缓冲的设置与清除

    控制器代码: //设置缓冲的方法 public function order() { $word = input('word');//接受搜索值 //题意:将订单数据使用redis进行缓存中,第二次读 ...

  4. MySQL Performance Schema详解

    MySQL的performance schema 用于监控MySQL server在一个较低级别的运行过程中的资源消耗.资源等待等情况. 1 performance schema特点 提供了一种在数据 ...

  5. 把EI科技 【载谈 Binomial Sum】 用人话说出来

    这个科技是用来 \(O(k+\log n)\) 求 \(\sum_{i=0}^n [x^i] f(x)p^i(x) \mod x^{k+1}\) 这个多项式的某些项数的线性组合 不过我只见过求第 $ ...

  6. freeswitch tts_commandline模块介绍

    概述 freeswitch是开源.免费的VOIP软交换平台,自带了很多功能各异的模块. mod_tts_commandline模块,本身没有TTS能力,而是通过调用TTS引擎的命令生成语音文件,tts ...

  7. C++设计模式 - 迭代器模式(Iterator)

    数据结构模式 常常有一-些组件在内部具有特定的数据结构,如果让客户程序依赖这些特定的数据结构,将极大地破坏组件的复用.这时候,将这些特定数据结构封装在内部,在外部提供统一的接口,来实现与特定数据结构无 ...

  8. springWeb——Servlet

    6.1.Servlet简介 servlet是sun公司开发动态web的一门技术 sum在这些API中提供了一个接口叫做:Servlet.开发的两个步骤: 编写一个类,实现Servlet接口 把开发好的 ...

  9. php——字符串的""和null,empty的关系

    public function test(){ $test = ""; if($test==null){ echo "test==null <hr>" ...

  10. notepad++给每一列数据加单引号及逗号结尾

    原始数据: 对列操作--先加前引号(光标放在第一行哦):编辑-->列块编辑 再加后引号和逗号(文本尾端不齐,就用替换): 打开替换窗口:ctrl+F(其实就是查找) 加完引号和逗号效果:(如果最 ...