延迟加载滑块背景图像

Question

我使用 Slick 滑块库创建了一个滑块，当我们使用该元素时很容易延迟加载图像，但在我的情况下，图像被设置为背景图像。

示例代码：

<ng-template  #ref let-step="id" matStepperIcon="number">
      <mat-icon>clear</mat-icon>
      {{ print.bind(step) }}
</ng-template> 

在我的示例中，我有一个带有 2 张幻灯片的滑块，其中将图像设置为背景。 如果滑块有 20 张幻灯片，它会减慢网站速度。所以我想延迟加载屏幕上不可见的背景图片。

我的JS代码是：

<div class="slider">
  <div class="slider__slide" style="background-image:url('../img/slide-1.jpg');">
      <div class="slider__slide__content">Test 1</div>
  </div>


  <div class="slider__slide" style="background-image:url('../img/slide-2.jpg');">
      <div class="slider__slide__content">Test 2</div>
  </div>

</div>