当前位置：首页 > 行业动态 > 正文

holder.js

holder.js是一款轻量级JavaScript库，用于快速生成图片占位符，支持自定义尺寸、主题及文本填充，兼容多浏览器，适用于响应

Holder.js：轻量级图片占位解决方案

基础概念与核心功能

Holder.js 是一个仅2KB的JavaScript库，用于快速生成图片占位符，其核心原理是通过Canvas或CSS生成灰度背景的响应式图像，替代传统空白占位图，该工具支持多种尺寸模式、主题样式及文本标注，适用于原型设计、内容加载过渡等场景。

核心特性解析

特性 说明
多尺寸模式 支持固定尺寸（100x100）、比例尺寸（100x50%）、响应式尺寸（auto）
主题定制 提供gray/color/transparent三种基础主题，支持自定义背景色
文本标注 可添加文字水印，支持字体大小/颜色/位置配置
跨域兼容 通过Base64编码实现跨域图片加载，避免CORS问题
性能优化 默认使用Canvas渲染，低版本浏览器自动降级为CSS方案

安装与基础用法

引入方式

<!-CDN方式 -->
<script src="https://cdn.jsdelivr.net/npm/holderjs@3.0.0/holder.min.js"></script>
<!-npm方式 -->
<script src="node_modules/holderjs/holder.js"></script>

基础语法

<img data-src="holder.js/100x100" alt="占位图">
<script>
  Holder.run({images: '.thumb'}); // 初始化指定元素
</script>

参数说明表
| 参数名 | 示例值 | 作用描述 |
|——————|—————–|——————————————|
| dimension | 200x100 | 宽高定义（支持百分比/auto） |
| bgcolor | #333 | 背景色设置（hex/rgb/color名称） |
| text | User Avatar | 水印文字内容 |
| fontsize | 16 | 文字字号（像素） |
| theme | gray/sky | 预置主题方案 |

holder.js 第1张

高级使用场景

响应式布局适配

<div class="container">
  <img data-src="holder.js/100%x300" alt="全宽横幅">
</div>
<style>
.container { width: 80%; max-width: 600px; }
</style>

动态主题切换

const holderConfig = {
  images: '.product-img',
  theme: 'sky',
  text: '点击查看',
  fontcolor: '#fff'
};
document.querySelector('.dark-mode-toggle').addEventListener('click', () => {
  holderConfig.theme = 'dark';
  Holder.run(holderConfig);
});

结合WebP优化

<img data-src="holder.js/200x200?bg=e6e6e6&text=加载中" alt="延迟加载图片">
<script>
  const realImage = document.querySelector('img').dataset.realSrc;
  if(realImage) {
    const img = new Image();
    img.onload = () => document.querySelector('img').src = realImage;
    img.src = realImage;
  }
</script>

与其他方案对比

维度 Holder.js CSS占位图 FakeLoader.js
文件体积 2KB 0KB（纯CSS） 12KB
响应式支持 原生支持 需媒体查询 需手动配置
动态参数 支持运行时修改 静态属性 支持动态更新
浏览器兼容性 IE9+ IE8+ 现代浏览器优先
功能扩展性 丰富API接口 有限CSS控制 侧重加载动画效果

常见问题处理

移动端模糊问题

/ 针对iOS设备优化 /
img[data-src^="holder.js"] {
  image-rendering: -webkit-optimize-contrast;
}

SVG图标集成

<svg class="icon-placeholder" viewBox="0 0 32 32">
  <use xlink:href="/icons.svg#camera"></use>
</svg>
<script>
  document.querySelector('.icon-placeholder').outerHTML = `
    <img data-src="holder.js/64x64?bg=cccccc&text=:)" alt="相机图标">
  `;
</script>

性能优化建议

  1. 懒加载策略：配合IntersectionObserver实现按需渲染

    const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
 if(entry.isIntersecting) {
   Holder.run({images: entry.target});
   observer.unobserve(entry.target);
 }
});
}, {rootMargin: '100px'});
document.querySelectorAll('[data-src^="holder.js"]').forEach(el => observer.observe(el));

  2. 缓存机制：对重复尺寸请求进行内存缓存

    const cache = new Map();
function getCachedHolder(key) {
return cache.has(key) ? cache.get(key) : generateHolder(key);
}
// 生成逻辑...

FAQs

Q1：如何在React项目中正确使用Holder.js？
A：推荐在组件挂载后调用Holder.run()，并在图片加载完成后清除占位符，示例： 

useEffect(() => {
  Holder.run({images: '.lazy-img'});
  return () => Holder.remove(); // 清理事件监听
}, []);

Q2：Holder.js生成的图片是否会影响SEO？
A：默认不会，可通过设置alt属性和ARIA属性增强可访问性： 

<img data-src="holder.js/100x100" alt="产品预览图" role="img" aria-label="产品图片占位符">
javascript占位图片
0

相关文章