Как добавить изображение-заполнитель к ионным слайдам в приложении ionic 3? - PullRequest
Новая
       37

Как добавить изображение-заполнитель к ионным слайдам в приложении ionic 3?

0 голосов
/ 18 мая 2018

Я хочу добавить изображение-заполнитель в мой ионный слайдер, прежде чем мои изображения будут загружены динамически.Вот мой код:

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;

    }
}

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Я нашел решение.Просто установите высоту div, используя style = "height: 200px"

, а затем в файле CSS просто добавьте свое изображение-заполнитель.Поэтому, когда изображение будет полностью загружено, оно будет отображаться поверх фонового изображения и будет скрывать его.

0 голосов
/ 19 мая 2018

Если вы используете ленивую загрузку, вы можете сделать что-то вроде этого ниже:

  • добавить оболочку div и сделать ее фон серым (например, скелетный интерфейс) или указать его на URL (я использовал внешний, новы можете использовать img из локальных ресурсов)
  • использовать условие привязки атрибута, чтобы установить src фактического img, только если это активный слайд или индекс +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);
    }
}
...