Wyświetla ikonę ładuje się podczas zdjęć ładunki

Chcę pokazać tarczy tła/ładowania wewnątrz div że będzie załadować obraz wewnątrz niej, obraz pokaże raz jest w pełni załadowany robi coś takiego:Wyświetla ikonę ładuje się podczas zdjęć ładunki

<div style="background-image:url('imageThatWillAppearBeforeLoad')"></div>

Demo (In jQuery)

Jak mogę zrobić to samo używając Angular2/Ionic2?

Źródło

2016-07-22 Folky.H

Możliwy duplikat [Ionic 2: (Łazy) Ładowanie spinner do zdjęć] (http://stackoverflow.com/ pytania/38846271/ionic-2-lazy-loading-spinner-for-pictures) –

Utwórz komponent, który pokazuje obraz zastępczy, do momentu załadowania żądanego obrazu, i ukrywa żądany obraz. Po załadowaniu obrazu ukrywasz symbol zastępczy i wyświetlasz obraz.

@Component({ 
    selector: 'image-loader', 
    template: `<img *ngIf="!loaded" src="url-to-your-placeholder"/> 
    <img [hidden]="!loaded" (load)="loaded = true" [src]="src"/>` 
}) 
export class ImageLoader { 
    @Input() src; 
}

Zobacz działa w Plunker.

Aktualizacja

Teraz rozumiem wymogi lepiej, oto rozwiązanie z obrazu tła. Jest trochę odlotowy i bardzo lubię ten oryginalny ...

@Directive({ 
    selector: '[imageLoader]' 
}) 
export class ImageLoader { 
    @Input() imageLoader; 

    constructor(private el:ElementRef) { 
    this.el = el.nativeElement; 
    this.el.style.backgroundImage = "url(http://smallenvelop.com/demo/image-loading/spinner.gif)"; 
    } 

    ngOnInit() { 
    let image = new Image(); 
    image.addEventListener('load',() => { 
     this.el.style.backgroundImage = `url(${this.imageLoader})`; 
    }); 
    image.src = this.imageLoader; 
    } 
}

Updated plunker.

Źródło

2016-07-24 08:06:34 yarons

Twój kod działa poprawnie, ale dla mojego przypadku, jak napisałem, mam '

' który zawiera obraz w tle, I "Próbowałem zmodyfikować twój kod tak, aby pasował do' div', który mam, ale to nie zadziałało, czy to możliwe, aby działało jak 'div'? –

Za to, co dotychczas osiągnąłem, myślę, że (obciążenie) nie działa z jakiegoś powodu! Ponieważ zastąpiłem 'img' z' div', etc ... kiedy idę do sprawdzenia 'DOM', widzę ukryty, co znaczy, że ładowany = true nie został zastosowany z jakiegoś powodu, co czyni mnie pewnym, że jest problem z '(load)' jest, że zamieniam go na '(kliknij)', a następnie umieść go w symbol zastępczy 'div' i zadziałało! Masz pojęcie, dlaczego '(load)' nie zadziałało? –

Nie działało, ponieważ 'div's nie ma zdarzenia' onload' ... Dlatego właśnie wykonałem komponent w ten sposób. – yarons

Oto kopia jednego z moim posts

I wreszcie rozwiązać ten problem z CSS! Kiedy obraz ładuje się w formacie jonowym 2, znacznik ion-img nie ma żadnej klasy. Jednak po załadowaniu obrazu znacznik ion-img otrzymuje klasę "img-loaded".

Oto moje rozwiązanie:

<ion-img [src]="img.src"></ion-img> 
    <ion-spinner></ion-spinner>

A mój CSS:

.img-loaded + ion-spinner { 
    display:none; 
}

Źródło

2016-09-02 23:32:27

Wyświetla ikonę ładuje się podczas zdjęć ładunki

Odpowiedz

Powiązane problemy