如何在离子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是活动幻灯片或其中的+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文件中添加您的占位符图像。因此，当图像完全加载时，它将显示在背景图像上，并将其隐藏。