显示加载图标，而图像加载

我想显示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

显示加载图标，而图像加载

回答

相关问题