Hiển thị một biểu tượng tải trong khi hình ảnh tải

Question

Tôi muốn hiển thị một spinner hình nền/tải bên trong một div đó sẽ được tải một hình ảnh bên trong của nó, hình ảnh sẽ hiển thị khi nó đã được nạp đầy đủ làm một cái gì đó như thế này:

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

Demo (In jQuery)

Làm cách nào tôi có thể sử dụng cùng Angular2/Ionic2?

Answer 1

Tạo thành phần hiển thị hình ảnh trình giữ chỗ cho đến khi hình ảnh được yêu cầu được tải và ẩn hình ảnh được yêu cầu. Khi hình ảnh được tải, bạn ẩn trình giữ chỗ và hiển thị hình ảnh.

@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; 
} 

Xem nó hoạt động trong Plunker.

Cập nhật

Bây giờ tôi hiểu các yêu cầu tốt hơn, đây là một giải pháp với hình nền. Đó là một chút hacky, và tôi thích một bản gốc tốt hơn ...

@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.

Answer 2

Dưới đây là một bản sao của một trong tôi posts

cuối cùng tôi giải quyết vấn đề đó với CSS! Khi một hình ảnh đang tải trong ionic 2, thẻ ion-img không có bất kỳ lớp nào. Tuy nhiên, khi hình ảnh cuối cùng được nạp, thẻ ion-img có được lớp "img-loaded".

Đây là giải pháp của tôi:

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

Và CSS của tôi:

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