顯示加載圖標，而圖像加載

我想顯示div內的背景圖像/加載微調將加載在其內部的圖像，該圖像將顯示，一旦它滿載做這樣的事情：顯示加載圖標，而圖像加載

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

Demo (In jQuery)

我怎樣才能使用Angular2/Ionic2？

來源

2016-07-22 Folky.H

的可能的複製[離子2：（懶惰）加載微調的圖片]（http://stackoverflow.com/問題/ 38846271/ionic-2-lazy-loading-spinner-for-pictures） –

創建一個組件，該組件顯示佔位符圖像，直到加載請求的圖像並隱藏請求的圖像。加載圖像後，您將隱藏佔位符並顯示圖像。

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

來源

2016-07-24 08:06:34 yarons

您的代碼工作正常，但對於我發佈的案例，我有一個'

'，它包含背景圖片，I試圖調整你的代碼來匹配'div'我有，但它沒有奏效，是否有可能使它作爲一個工作'div'？ –

至於我到目前爲止所取得的成就，我猜（負載）因爲某些原因不起作用！因爲我已經用'div'替換了'img'等等......當我去檢查DOM時，我看到隱藏的意思，因爲某種原因沒有應用loaded = true，我甚至確信'（load）'有一個問題，就是我用'（click）'替換它'然後我把它放在佔位符'div'中，它就起作用了！那麼，你有什麼想法爲什麼'（加載）'沒有工作？ –

它沒有工作，因爲'div'沒有'onload'事件......這就是爲什麼我用這種方式製作組件的原因。 – yarons

這裏是我的posts

我終於解決了這個問題與CSS的副本之一！當圖像在離子2中加載時，ion-img標籤沒有任何類別。但是，當圖像最終加載時，ion-img標籤會獲得「img-loaded」類。

這裏是我的解決方案：

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

我的CSS：

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

來源

2016-09-02 23:32:27

顯示加載圖標，而圖像加載

回答

相關問題