Angular中如何实现图片加载完成后才显示且加载期间展示骨架屏？

实现逻辑 #

• 通过预加载机制监听图片完整加载状态，加载过程中骨架屏保持显示，原图默认隐藏
• 单个图片区块对应独立的骨架屏元素，互不影响，符合分区块加载的场景要求
• 图片所有区块完全渲染完成后，自动销毁对应骨架屏并显示原图

基础DOM结构 #

<!-- 每个分区块对应一个独立容器 -->
<div class="image-container">
  <!-- 骨架屏默认显示 -->
  <div class="skeleton"></div>
  <!-- 目标图片默认隐藏，src后续从API获取后赋值 -->
  <img class="content-img" alt="" style="display: none;">
</div>

核心加载代码 #

/**
 * 批量加载分区块图片
 * @param {Array} imgSrcList 从API获取的图片地址列表
 */
function loadBlockImages(imgSrcList) {
  const containers = document.querySelectorAll('.image-container')
  imgSrcList.forEach((src, idx) => {
    const curContainer = containers[idx]
    const skeleton = curContainer.querySelector('.skeleton')
    const curImg = curContainer.querySelector('.content-img')

    // 新建临时图片实例预加载，避免页面出现半加载状态的图片
    const preloadImg = new Image()
    preloadImg.src = src

    // 图片完全加载完成后触发（渐进式分块加载的图片会在所有区块渲染完成后才触发该事件）
    preloadImg.onload = () => {
      curImg.src = src
      curImg.style.display = 'block'
      // 销毁对应骨架屏
      skeleton.remove()
    }

    // 加载失败降级逻辑（可选）
    preloadImg.onerror = () => {
      curImg.src = '本地默认占位图地址'
      curImg.style.display = 'block'
      skeleton.remove()
    }
  })
}

骨架屏样式示例 #

.skeleton {
  width: 100%;
  height: 320px; /* 和对应图片展示高度保持一致 */
  border-radius: 4px;
  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
  background-size: 200% 100%;
  animation: skeletonShine 1.5s linear infinite;
}

@keyframes skeletonShine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

注意事项 #

• 对于分块加载的渐进式图片，原生onload事件会在全部分块渲染完成后才触发，刚好匹配需求，不需要额外监听中间加载状态
• 预加载逻辑可以根据业务需要调整为懒加载模式，仅当图片区块进入可视区域后才触发加载动作

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