如何将占位符图像添加到离子 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）
使用属性绑定条件仅设置实际 img 的 src，如果它是活动幻灯片或 +1 索引（您可以在此处更改您需要的条件）
加载实际图像时 - 在您的数据模型中设置一个标志以保留 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 文件中添加您的占位符图像。所以当图像完全加载时，它会显示在背景图像上并隐藏它。

如何将占位符图像添加到离子 3 应用程序中的离子幻灯片？

How to add placeholder image to ion-slides in ionic 3 app?

ionic-framework

ion-slides