holder.js占位图片生成器

2024-05-18 22:56:47

当我们在进行网页的排版布局时，有时会需要放置些占位图片来丰富内容，手动生成这些占位图片的话，特别是尺寸要精确到像素时，就会有些繁琐。

好在 holder.js 可以帮我们自动生成占位图片，而且还能定义占位图片的一些基本样式。

基本用法

Holder.js的基本用法很简单，可以去官网下载，引入holder.js文件就可以了，也可以直接使用Bootcss的CDN :

<script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>

1

向页面中插入占位图片，只需把img标签的src属性统一设置成holder.js，并附上图片的尺寸就可以了：

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

1

holder.js就会在该处自动生成一张规定尺寸的占位图片：

控制占位图片尺寸

holder.js中的图片尺寸，默认单位是像素。也可以用百分比作为单位，这样占位图片就会根据父节点的尺寸自动缩放。注意，holder.js中百分比要写p，而不是%：

<img src="holder.js/100px200"`>

1

想要让占位图片在缩放时，依然保持固定的长宽比，可以加上auto参数：

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

1

调整占位图片的样式

调整颜色

holder.js生成的占位图片默认是浅灰色配色，配色可以通过theme参数修改：

<img src="holder.js/300x200?auto=yes&theme=vine">

1

holder.js共定义了6种占位图片配色，分别是：sky、vine、lava、gray、industiral、social。

如果内置的配色方案不满足你的需要的话，还能自己定义配色。可以配置项有限，但基本上能满足需要：

Holder.addTheme("dark", {bg: "#000", // 背景色fg: "#aaa", // 前景色（字符颜色）size: 11, // 字符大小font: "Monaco", // 字体fontweight: "normal" // 字符粗细
});

1
2
3
4
5
6
7

调整文字

占位图片的正中默认显示该图片的尺寸，可以通过text参数修改成任意文字。如果需要换行，就在换行处输入\n，注意\n的两边各需要一个空格：

<img src="holder.js/300x200?text=此处请放一张绿色的图片 \n 最好有边框">

1

以上就是holder.js的使用方法。

holder.js占位图片生成器相关推荐

图片占位符生成器holder.js的简单使用
holder.js用于网页的排版布局,它非常方便地自动生成占位图片,并定义样式 1.下载和引用holder.js到网页中下载:holder.js官网 2.在网页中直接调用 <img class ...
html5 占位图片,placeholder.js-可在浏览器端生成占位图片的js插件
placeholder.js是一款轻量级的可在浏览器端生成占位图片的javascript库插件.该图片占位插件大小小于1kb,不依赖于任何js框架,并提供完善的配置参数和简单的方法.它的特点还有: 不 ...
lazyload.js实现图片异步延迟加载
所谓图片异步加载,意思是不用一次把图片全部加载完,你可以叫它延迟加载,缓冲加载都行. 看看你有没有这种需求:某篇文章图片很多,如果在载入文章时就载入所有图片,无疑会延缓载入速度,让用户等更久,所以,我 ...
如何使用echo.js实现图片的懒加载（整理）
如何使用echo.js实现图片的懒加载(整理) 一.总结一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
holder.js如何使用
holder.js的使用一.总结一句话总结:使用:holder.js后面接图片宽高 <img src="holder.js/300x200" /> 1.holder ...
答题卡格子作文图片生成器
答题卡格子作文图片生成器(article-image-generator) 简介如标题所见,这个项目可以将电子稿的作文转换成答题卡方格纸一样的形式在线示例目录介绍 static 目录下是对应使用 ...
html lorem占位符,10 个优秀的占位图片（Placeholder Image）生成工具 - 文章教程
在开发网站时,通常需要填充一些图片来预览页面效果,如果没有合适的素材,这时我们就需要占位图片,通过 URL 定制形如 sitename.com/width/height 的地址就可以得到一个随机的占位 ...
holder.js的使用心得
在编写前端的时候,不总是有机会有趁手的预览图,这时我们总会想,有个人来撑场子就好了,holder.js显然是很好的选择,不光可以占住空间,还可以告诉我们div的大小,可以说十分舒服了,省却了F12麻烦 ...
（二）无状态的web应用（单py的Django占位图片服务器）
本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃阅读本文建议了解Django框架的基本工作流程,了解WSGI应用,如果对以上不是很清楚,建议结 ...

最新文章

热门文章