holder.js的使用

一、总结

一句话总结：使用：holder.js后面接图片宽高

<img src="holder.js/300x200" />

1、holder.js的使用注意事项是什么？

使用：<img src="holder.js/300x200" />注意事项：300x200里面的符号是x,不是乘法号

2、holder.js后如何接类似主题这样的参数？

和url接参数的方式一致，？问号加参数（使用的时候失败了）

theme: The theme to use for the placeholder. Example: holder.js/300x200?theme=sky
random: Use random theme. Example: holder.js/300x200?random=yes

二、holder.js的使用

使用：<img src="holder.js/300x200" />注意事项：300x200里面的符号是x,不是乘法号

为了避免控制台404错误,您可以使用data-src代替src。<img data-src="holder.js/300x200" />

Placeholder options are set through URL properties, e.g. holder.js/300x200?x=y&a=b. Multiple options are separated by the & character.

theme: The theme to use for the placeholder. Example: holder.js/300x200?theme=sky
random: Use random theme. Example: holder.js/300x200?random=yes
bg: Background color. Example: holder.js/300x200?bg=2a2025
fg: Foreground (text) color. Example: holder.js/300x200?fg=ffffff
text: Custom text. Example: holder.js/300x200?text=Hello
size: Custom text size. Defaults to pt units. Example: holder.js/300x200?size=50
font: Custom text font. Example: holder.js/300x200?font=Helvetica
align: Custom text alignment (left, right). Example: holder.js/300x200?align=left
outline: Draw outline and diagonals for placeholder. Example: holder.js/300x200?outline=yes
lineWrap: Maximum line length to image width ratio. Example: holder.js/300x200?lineWrap=0.5

测试后的效果

There are 6 default themes: sky, vine, lava, gray, industrial, and social. Example: holder.js/300x200?theme=social

Themes have 5 properties: fg, bg, size, font and fontweight. The size property specifies the minimum

font size for the theme. The fontweight default value is bold.

You can create a sample theme like this:

自定义后直接使用：<img src="holder.js/300x200?theme=red" />

If you have a group of placeholders where you'd like to use particular text, you can do so by adding a text property to the theme:

Holder.addTheme("thumbnail", { bg: "#fff", text: "Thumbnail" });

参考：holder.js的使用 - CSDN博客
https://blog.csdn.net/wang_magento/article/details/78799032

转载于:https://www.cnblogs.com/Renyi-Fan/p/9505449.html

holder.js如何使用相关推荐

图片占位符生成器holder.js的简单使用
holder.js用于网页的排版布局,它非常方便地自动生成占位图片,并定义样式 1.下载和引用holder.js到网页中下载:holder.js官网 2.在网页中直接调用 <img class ...
holder.js占位图片生成器
当我们在进行网页的排版布局时,有时会需要放置些占位图片来丰富内容,手动生成这些占位图片的话,特别是尺寸要精确到像素时,就会有些繁琐. 好在 holder.js 可以帮我们自动生成占位图片,而且还能定义 ...
holder.js的使用心得
在编写前端的时候,不总是有机会有趁手的预览图,这时我们总会想,有个人来撑场子就好了,holder.js显然是很好的选择,不光可以占住空间,还可以告诉我们div的大小,可以说十分舒服了,省却了F12麻烦 ...
前端开发需要了解的JS插件
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
超棒的30款JS类库和工具
当设计人员和开发人员真正快速便捷的使用JavaScript类库和工具的同时,他们的生活也就变得更轻松.简单.你付出的越多,它回报你的也就越多,这正是JS类库和工具需求量很大的原因. 对于Web设计人员 ...
vue.js移动端记账本完成的总结（未完待续，电脑快没电了）
两个目的第一个目的:这一个移动端记账本的创作来源呢,其实是我在学习了理财的课程之后,突然想为自己写一个记账的东西来记录自己每天花费的钱,从而可以降低那些不必要的开销,从而达到理财的第一步. 当然还有 ...
vue.js移动端记账本完成的总结（未完待续，电脑快没电了） 1
两个目的第一个目的:这一个移动端记账本的创作来源呢,其实是我在学习了理财的课程之后,突然想为自己写一个记账的东西来记录自己每天花费的钱,从而可以降低那些不必要的开销,从而达到理财的第一步. 当然还有 ...
前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...
4.22、Bootstrap V4自学之路-----内容---轮播
为什么80%的码农都做不了架构师?>>> 示例 <div id="carousel-example-generic" class="caro ...

holder.js如何使用