Background images loading slow

Ionic Framework ionic-v3
#1

I am trying to create ionic app with background image sliding based on timer on home page.
facing issue with slow loading images.

home.ts

import { Component, Input, ViewChild } from ‘@angular/core’;
import { NavController, Content } from ‘ionic-angular’;
import { BackgroundService } from ‘…/…/services’;
import { HttpErrorResponse } from ‘@angular/common/http’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
@ViewChild(Content) private content: Content;

private displayTime: number;
private basePath: string;
private transitionTime: string;
private images: string[];
private task: number;
@Input(‘header’)
header_data:any;
constructor(public navCtrl: NavController, private backgroundService: BackgroundService) {
this.header_data = {ismenu:true,ishome:false,title:“Custom Home”};
}

public ngOnInit() {
this.backgroundService.getConfigObjectFromJson().subscribe(
data=> {
let configObject = data.config;
this.displayTime = configObject.HM_BKG_IMG_DISPLAY_TIME;
this.basePath = configObject.IMG_BASE_PATH;
this.transitionTime = configObject.HM_BKG_IMG_TRANSITION_DURATION;
this.images = configObject.HM_BKG_IMAGES;
this.startImageSlideShow();
},
(error: HttpErrorResponse) => {
console.log(error.message);

  }
)

}

private startImageSlideShow() {
let index = 0;
this.content.setElementStyle(‘transition-duration’, this.transitionTime);
this.task = window.setInterval(()=> {
console.log(‘Before image set *************’ + this.images[index]);
this.content.setElementStyle(‘background-image’, ‘url(’+ this.basePath + this.images[index] +’)’);
index++;
if(index >= this.images.length) {
index = 0;
}
console.log(‘After image set *************’);

},this.displayTime);

}

public ngOnDestroy() {
window.clearInterval(this.task);
}
}

home.scss

page-home {

ion-content {
    background-size: 100% 100%;
    -webkit-transition: background-image 1s ease-in-out, -webkit-transform 200ms ease;
    transition: background-image 1s ease-in-out, transform 200ms ease;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
}

}

Please suggest me how to resolve the issue

#2

Are these images always the same or you want it to have service for getting these images?
If it’s not place them in assets folder. It will take less time to load as service call will be removed.
Or if you want to have these images by services try ion-slides with loop true and slide timing.

#3

Hi Hennavora,

Already placed in asserts folder, tried with out service also still facing same issue.

below is my config file

{
“config”: {
“HM_BKG_IMG_DISPLAY_TIME”: 6000,
“HM_BKG_IMAGES”: [“tablet_bg1.png”, “tablet_bg2.png”, “tablet_bg3.png”, “tablet_bg4.png”,
“tablet_bg5.png”
],
“IMG_BASE_PATH”: “assets/background/”,
“HM_BKG_IMG_TRANSITION_DURATION”: “1s”
}
}

#4

SIykNqPlWw
SIykNqPlWw.gif472×573 1.3 MB

Attached the screenshot

#5

Hi Heenovora,

Tried ion-slide, image loading is good but image not fitted to slider content area, any idea how to fit image.

5gtLS7GPRM
5gtLS7GPRM.gif768×574 2.95 MB

#6

did you tried this with slides?

try implementing this logic with your file.

#7

use object-fit property or background-size property to set it correctly.
Object-fit and background-image

use this css to set content to the start of slides

ion-slide.swiper-slide {
    align-items: flex-start;
}

default for slides is center.

#8

Hi Hennavora,

Thank you, it working with slides after adding

    ion-slide.swiper-slide {

        background-size: 100% 100%;
    }
#9