使用NgOptimizedImage指令时如何显示图片加载占位符？

核心原因 #

你之前尝试的自定义指令无效，是因为NgOptimizedImage会接管图片的加载生命周期，包括懒加载触发、资源优先级管理，原生load事件不会按预期触发，必须使用它提供的专属事件来监听加载状态。

解决方案步骤 #

1. 利用NgOptimizedImage内置事件控制骨架显示

NgOptimizedImage提供了loadingStart和loadingComplete两个事件，用来精准监听图片加载的开始与完成状态，我们可以通过这两个事件切换骨架占位符和图片的显示状态。

2. 实现骨架占位符与Swiper布局更新

以下是完整的组件示例：

模板代码

<div class="swiper-container">
  <swiper [slidesPerView]="3" [spaceBetween]="10" #swiper>
    <ng-template swiperSlide *ngFor="let item of imageList">
      <div class="image-wrapper">
        <!-- 骨架占位符 -->
        <div class="image-skeleton" *ngIf="!item.loaded"></div>
        <!-- NgOptimizedImage 图片 -->
        <img
          [ngSrc]="item.src"
          [width]="item.width"
          [height]="item.height"
          priority="false"
          (loadingStart)="item.loaded = false"
          (loadingComplete)="item.loaded = true; updateSwiperLayout()"
          [alt]="item.alt"
        />
      </div>
    </ng-template>
  </swiper>
</div>

CSS样式

.image-wrapper {
  position: relative;
  width: 100%;
  height: 250px; /* 匹配图片的固定高度 */
  overflow: hidden;
}

.image-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f5f5f5 25%, #ececec 50%, #f5f5f5 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite linear;
  border-radius: 8px; /* 可选，匹配图片圆角 */
}

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

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; /* 初始隐藏，加载完成后显示 */
}

img.loaded {
  display: block;
}

组件类代码

import { Component, ViewChild } from '@angular/core';
import { SwiperComponent } from 'swiper/angular';

interface ImageItem {
  src: string;
  width: number;
  height: number;
  alt: string;
  loaded: boolean;
}

@Component({
  selector: 'app-image-swiper',
  templateUrl: './image-swiper.component.html',
  styleUrls: ['./image-swiper.component.css']
})
export class ImageSwiperComponent {
  imageList: ImageItem[] = [
    { src: 'assets/image1.jpg', width: 300, height: 250, alt: 'Image 1', loaded: false },
    { src: 'assets/image2.jpg', width: 300, height: 250, alt: 'Image 2', loaded: false },
    // 更多图片...
  ];

  @ViewChild('swiper') swiperComponent?: SwiperComponent;

  updateSwiperLayout() {
    // 图片加载完成后强制Swiper更新布局，避免因图片尺寸变化导致的延迟
    setTimeout(() => {
      this.swiperComponent?.swiperRef.update();
    }, 100);
  }
}

3. 全局复用：封装自定义指令

如果需要在整个应用中给所有NgOptimizedImage添加骨架占位符，可以封装成自定义指令，避免重复代码：

import { Directive, ElementRef, Renderer2, HostListener, OnInit } from '@angular/core';

@Directive({
  selector: 'img[ngSrc][imageSkeleton]'
})
export class ImageSkeletonDirective implements OnInit {
  private skeletonEl: HTMLElement;

  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.skeletonEl = this.renderer.createElement('div');
    this.renderer.addClass(this.skeletonEl, 'image-skeleton');
  }

  ngOnInit(): void {
    // 将骨架元素插入到图片父容器中，与图片同级
    const parent = this.el.nativeElement.parentElement;
    if (parent) {
      this.renderer.insertBefore(parent, this.skeletonEl, this.el.nativeElement);
      this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
    }
  }

  @HostListener('loadingStart')
  onLoadingStart(): void {
    this.renderer.setStyle(this.skeletonEl, 'display', 'block');
    this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
  }

  @HostListener('loadingComplete')
  onLoadingComplete(): void {
    this.renderer.setStyle(this.skeletonEl, 'display', 'none');
    this.renderer.setStyle(this.el.nativeElement, 'display', 'block');
    
    // 如果父容器是Swiper滑块，触发布局更新
    const swiperSlide = this.el.nativeElement.closest('.swiper-slide');
    if (swiperSlide && window.Swiper) {
      const swiper = window.Swiper.getInstance(swiperSlide.closest('.swiper'));
      swiper?.update();
    }
  }
}

使用时只需给图片添加指令即可：

<img ngSrc="assets/image.jpg" width="300" height="250" imageSkeleton alt="Image">

关键注意点 #

• 必须使用NgOptimizedImage提供的loadingStart/loadingComplete事件，而非原生load/error事件，因为前者是Angular官方为该指令设计的生命周期钩子。
• 图片加载完成后必须调用Swiper的update()方法，强制重新计算滑块尺寸，避免布局偏移或延迟。
• 骨架占位符的尺寸要与图片的实际尺寸一致，避免切换时出现布局跳动。

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