ionic-framework - 如何在 ionic 3 应用程序中向离子幻灯片添加占位符图像？

Question

我想在动态加载图像之前将占位符图像添加到我的离子滑块。这是我的代码：

HTML

<div *ngIf="service?.banners" class="home-banners">
        <ion-slides  pager="true"  spaceBetween="5" loop="true" autoplay="3900">
            <ion-slide *ngFor='let value of service.banners'>
                
                 <img src="{{value}}"> 
                </ion-slide>
        </ion-slides>
    </div>

SCSS

.home-banners {
    ion-slides {

        height: 50%; 
        padding-left: 5px;
        padding-right: 5px;
         padding-top: 5px;

    }
}

Answer 1

如果您追求延迟加载方法，您可以执行以下操作：

• 添加一个 div 包装器并将其背景设为灰色（例如骨架 UI）或将其指向 URL（我使用外部但您可以使用本地资产中的 img）
• 如果它是活动幻灯片或从中 +1 索引，则使用属性绑定条件仅设置实际 img 的 src（您可以在此处更改您需要的条件）
• 在加载实际图像时 - 在数据模型中设置一个标志以保持 src 完整，如果图像已经加载

html模板：

<ion-content>
  <div>
    <ion-slides #sliders pager="true" spaceBetween="5">
      <ion-slide *ngFor='let imgItem of images; index as i;'>
        <div class="lazySlide">
          <img class="lazyImage" [src]="(sliders.getActiveIndex() == i || sliders.getActiveIndex() == i-1) || imgItem.loaded? imgItem.source:''" (load)="imgItem.loaded=true">
        </div>
      </ion-slide>
    </ion-slides>
  </div>
</ion-content>

组件代码示例：

import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  images: Array<{ loaded: boolean, source: string}> = [
    {
      loaded: false,
      source: "https://placeimg.com/1000/1000/nature"
    },
    {
      loaded: false,
      source: "https://placeimg.com/1000/1000/people"
    },
    {
      loaded: false,
      source: "https://placeimg.com/1000/1000/tech"
    },
    {
      loaded: false,
      source: "https://placeimg.com/1000/1000/architecture"
    },
    {
      loaded: false,
      source: "https://placeimg.com/1000/1000/animals"
    }
  ]

  constructor(
  ) {
  }

}

scss:

page-home {
    .lazyImage {
        width: 100%;
        height: 100%;
    }
    .lazySlide {
        background: url(http://via.placeholder.com/1000x1000);
    }
}

Answer 2

我找到了解决方案。只需使用 style="height:200px" 固定 div 的高度

然后在 css 文件中简单地添加您的占位符图像。因此，当图像完全加载时，它将显示在背景图像上并隐藏它。