Holder.js完全在浏览器中呈现图像占位符。占位符可以具有自定义颜色,字体,调整大小行为和渲染引擎(Canvas / SVG)。

先上官方大图

使用方法

首先在页面中引入holder.js

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

简单使用

然后在需要占位图的地方加入以下代码

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

效果图如下

高级使用

holder.js可以根据需求自定义不同风格的占位图

  • 支持主题

holder.js内置了多种不同风格,使用方法为holder.js/300x200?theme=sky,其中可选的风格有sky, vine, lava, gray, industrial, social.您还可以使用holder.js/300x200?random=yes来随机选择风格。

  • 字体和背景色的支持

holder.js还可以设置字体风格、大小、背景色、前景色等等,使用方法如下:

  • theme:用于占位符的主题。例:holder.js/300x200?theme=sky
  • random:使用随机主题。例:holder.js/300x200?random=yes
  • bg: 背景颜色。例:holder.js/300x200?bg=2a2025
  • fg:前景(文本)颜色。例:holder.js/300x200?fg=ffffff
  • text:自定义文本。例:holder.js/300x200?text=Hello
  • size:自定义文本大小。默认为pt单位。例:holder.js/300x200?size=50
  • font:自定义文本字体。例:holder.js/300x200?font=Helvetica
  • align:自定义文本对齐方式(左,右)。例:holder.js/300x200?align=left
  • outline:绘制占位符的轮廓和对角线。例:holder.js/300x200?outline=yes
  • lineWrap:最大行长度与图像宽度比。例:holder.js/300x200?lineWrap=0.5

# 换行

<img src="holder.js/300x200?text=益达博客 \n blog.extrastu.xin">

点击实时预览codepen

# 最后

想了解更多请参考holder.js项目地址: https://github.com/imsky/holder

# the end


扫描二维码,在手机上阅读!