HTML图片占位符插件Holder.js使用教程

温馨提示:本文最后更新于2025-06-03 19:38:16,某些文章具有时效性,若有错误或已失效,请在下方留言!
AI智能摘要
在网页布局设计时,holder.js插件可用于自动生成特定尺寸的占位图片,节省手动制作的麻烦。使用方式简便,可直接下载或通过CDN引入。图片尺寸可通过路径设置,百分比单位用"p"表示,且支持通过auto参数保持固定比例。样式方面,默认提供6种配色主题,也可自定义。同时,占位图片中心的文字默认为尺寸信息,可通过text参数自由设定,换行则需在文中加入" n "。
— 此摘要由AI分析文章内容生成,仅供参考。

当我们在进行网页的排版布局时,有时会需要放置些占位图片来丰富内容,手动生成这些占位图片的话,特别是尺寸要精确到像素时,就会有些繁琐。
好在 holder.js 可以帮我们自动生成占位图片,而且还能定义占位图片的一些基本样式。

基本用法

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

引用CDN文件
<script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>

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

//holder.js插入图片方式
<img src="holder.js/300x200" alt="图片占位符生成器:holder.js" />

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

控制占位图片尺寸

holder.js中的图片尺寸,默认单位是像素。也可以用百分比作为单位,这样占位图片就会根据父节点的尺寸自动缩放。

holder.js控制图片尺寸


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

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

用auto参数保持固定的长宽比


<img src="holder.js/300x200?auto=yes" alt="图片占位符生成器:holder.js" />

调整占位图片的样式

调整颜色

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

调整holder.js配色


<img src="holder.js/300x200?auto=yes&theme=vine" alt="图片占位符生成器:holder.js" />

holder.js共定义了6种占位图片配色,分别是:sky、vine、lava、gray、industiral、social。如果内置的配色方案不满足你的需要的话,还能自己定义配色。虽然 配置项有限,但基本上能满足需要:

//自定义holder.js图片配色
Holder.addTheme("dark", {
                 bg: "#000", // 背景色
                 fg: "#aaa", // 前景色(字符颜色)
                 size: 11, // 字符大小
                 font: "Monaco", // 字体
                 fontweight: "normal" // 字符粗细
                       }
                 );

调整文字

占位图片的正中默认显示该图片的尺寸,可以通过text参数修改成任意文字。如果需要换行,就在换行处输入n,

//增加文字的图片点位符
<img src="holder.js/300x200?text=此处请放一张绿色的图片 n 最好有边框" alt="图片占位符生成器:holder.js" />

温馨提示:本文最后更新于2025-06-03 19:38:16,文章具有时效性,若有错误或失效,请在下方留言或联系站长邮箱
本站资源均为网友推荐收集整理而来,请勿商业运营,仅供学习和研究,请在下载后24小时内删除!!
© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容