How to show display image before the data load in ionic 4

@rizwan478 wrote:

I am working on ionic 4 app. my app is working properly. Issue is that now i have list of objects having different prices and details. when i load the page everything is loaded but image take 2 3 second delay after data uploaded. i dont know how to resolve this. my html and .ts code is ass follow. any help would be appreciated.

<ion-row >
    <ion-col size="12" [ngClass]="{'featured': isFeatured() }" class="result-image"
             [ngStyle]="{'background-image': 'url(' + environment.API + 'images/'
             + itemType + '/' + data.coverImage + ')'}" no-padding>
    </ion-col>
</ion-row>
<ion-row>
    <ion-col size="7">{{ data.name }}</ion-col>
    <ion-col size="5">
        <ion-badge *ngIf="offer" class="offer" color="warning">{{ offer.strapline }}</ion-badge>
    </ion-col>
</ion-row>

and my .ts code is as

 isFeatured() {
  return this.data.promotedListing &&
  moment(this.date).isBetween(moment(this.data.promotedFrom), moment(this.data.promotedTo));
 }
checkOffers(result: Venue | Event) {
        const validOffers = [];
        if (result.offers) {
            result.offers.forEach(offer => {
                const rule = new RRule({
                    dtstart: new Date(offer.rrule.dtstart),
                    until: new Date(offer.rrule.until),
                    freq: offer.rrule.freq,
                    byweekday: offer.rrule.byweekday,
                    bysetpos: offer.rrule.bysetpos || null,
                    bymonthday: offer.rrule.bymonthday || null,
                    byyearday: offer.rrule.byyearday || null,
                    count: offer.rrule.count || null,
                    byweekno: offer.rrule.byweekno || null,
                });
                const date = new Date(this.date);
                console.log(date);
                const occurences = rule.between(moment(date).utc().startOf('date').toDate(),
                    moment(date).utc().endOf('date').toDate());
                occurences.forEach(occurance => {
                    validOffers.push(offer);
                });
            });

        }

        if (validOffers.length === 1) {
            this.offer = validOffers[0];
        }

        if (validOffers.length > 1) {
            this.offer = {
                strapline: 'Multiple offers inside',
                description: '',
                duration: '',
            };
        }
    }

check offer is called at ngOninIt.

Posts: 1

Participants: 1

Read full topic