एक लोडिंग आइकन प्रदर्शित छवियों भार

Question

मैं, छवि एक बार यह कुछ इस तरह कर रही है पूरी तरह से लोड है दिखाएगा एक पृष्ठभूमि छवि/लोड हो रहा है स्पिनर एक div अंदर है कि इसके अंदर एक छवि लोड होगा दिखाना चाहते हैं, जबकि:

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

Demo (In jQuery)

मैं कोणीय 2/आयनिक 2 का उपयोग कर कैसे कर सकता हूं?

Answer 1

एक घटक बनाएं जो प्लेसहोल्डर छवि को तब तक दिखाता है जब तक अनुरोधित छवि लोड नहीं हो जाती है, और अनुरोधित छवि को छुपाता है। एक बार छवि लोड होने के बाद, आप प्लेसहोल्डर को छुपाएं और छवि दिखाएं।

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

इसे Plunker में काम करना देखें।

अद्यतन

अब जब कि मैं आवश्यकताओं को बेहतर समझते हैं, यहाँ पृष्ठभूमि छवि के साथ एक समाधान है। यह थोड़ा हैकी है, और मुझे मूल एक बेहतर पसंद है ...

@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

यहाँ मेरी posts

मैं अंत में सीएसएस के साथ कि समस्या हल में से एक की एक प्रति है! जब आयनिक 2 में कोई छवि लोड हो रही है, तो आयन-आईएमजी टैग में कोई वर्ग नहीं है। हालांकि, जब छवि अंततः लोड हो जाती है, तो आयन-आईएमजी टैग कक्षा "img-loaded" प्राप्त करती है।

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

और मेरे सीएसएस:

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