如何用JS实现Bootstrap 5图片加载完成后移除placeholder类

实现思路 #

给每张图片的父容器添加Bootstrap 5的placeholder相关类，生成加载卡片视觉效果；监听每张图片的加载完成事件，加载完成后移除容器的占位类并显示图片，同时处理图片缓存的边界情况。

HTML结构示例 #

先准备带占位容器的图片结构，用d-none暂时隐藏图片：

<!-- 单张图片的容器结构 -->
<div class="col-md-4 mb-3">
  <div class="ratio ratio-16x9">
    <img src="你的图片地址.jpg" alt="图片描述" class="lazy-image d-none img-fluid">
  </div>
</div>

<!-- 多张图片重复上述结构即可 -->
<div class="col-md-4 mb-3">
  <div class="ratio ratio-16x9">
    <img src="另一张图片地址.jpg" alt="图片描述" class="lazy-image d-none img-fluid">
  </div>
</div>

JavaScript实现代码 #

// 获取所有需要处理的图片
const targetImages = document.querySelectorAll('.lazy-image');

targetImages.forEach(img => {
  // 获取图片的父容器（即占位效果的承载元素）
  const placeholderContainer = img.parentElement;
  // 添加Bootstrap占位类，生成加载卡片效果
  placeholderContainer.classList.add('placeholder-glow', 'placeholder');

  // 监听图片加载完成事件
  img.addEventListener('load', () => {
    // 移除占位类，加载卡片消失
    placeholderContainer.classList.remove('placeholder-glow', 'placeholder');
    // 显示图片
    img.classList.remove('d-none');
  });

  // 处理图片已缓存的情况：缓存图片不会触发load事件，手动触发一次
  if (img.complete) {
    img.dispatchEvent(new Event('load'));
  }
});

补充说明 #

• 使用Bootstrap的ratio类可以保证占位容器和图片的比例一致，避免加载完成后布局跳动
• 可以根据需求调整placeholder类的样式（比如通过自定义CSS修改背景色、动画速度等）
• 如果不需要比例容器，也可以直接给图片的父容器设置固定高度，配合placeholder类使用

内容的提问来源于stack exchange，提问作者btros