使用NgOptimizedImage时如何设置图片加载前占位图？

NgOptimizedImage本身提供了更简洁可靠的占位图实现方案，同时也能针对性解决你遇到的滚动卸载后返回空白的问题，具体方法如下：

1. 内置占位图实现（推荐） #

无需手动监听load/unload事件，组件本身支持两种常用占位图模式：

低质量缩略图占位（LQIP） #

准备一张原图的低分辨率缩略图，通过placeholder属性绑定即可，组件会自动先加载小体积的低清图，原图加载完成后自动替换：

<img [ngSrc]="imageUrl" fill [placeholder]="lowResImageUrl">

纯色占位 #

如果不需要缩略图，可直接指定纯色作为占位背景，配合placeholderColor使用：

<img [ngSrc]="imageUrl" fill placeholder="color" placeholderColor="#f5f5f5">

2. 解决滚动离开后返回的空白问题 #

你遇到的滚动离开后原图卸载、返回时空白的情况，是因为NgOptimizedImage默认的懒加载策略会在元素离开视口时自动卸载图片以节省资源，可通过以下两种方式调整：

调整卸载阈值 #

修改组件配置，设置更高的卸载阈值，让图片在离开视口更远的距离后才触发卸载，短距离滚动时不会卸载图片：

import { NgOptimizedImage } from '@angular/common';

@NgModule({
  imports: [
    NgOptimizedImage.withConfig({
      unloadImageThreshold: 500, // 元素离开视口500px后才卸载图片
    })
  ]
})
export class YourModule {}

禁用图片卸载（按需使用） #

如果你的场景对资源占用要求不高，可直接禁用卸载功能，图片加载后会一直保留：

NgOptimizedImage.withConfig({
  unloadImages: false
})

自定义占位容器方案（备选） #

如果不想使用内置属性，也可以用容器包裹的方式，将占位图设为容器背景，原图加载完成后覆盖显示：

<div class="image-wrapper">
  <img [ngSrc]="imageUrl" fill class="target-image" (load)="onImageLoaded($event.target)">
</div>

配套CSS：

.image-wrapper {
  position: relative;
  background: url('占位图地址') center/cover no-repeat;
}
.target-image {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.target-image.loaded {
  opacity: 1;
}

组件内逻辑：

onImageLoaded(img: HTMLImageElement) {
  img.classList.add('loaded');
}

这种方式下背景占位图不会被卸载，即便原图重新加载，占位背景也会一直显示。

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