显示加载图标,而图像加载
我想显示div
内的背景图像/加载微调将加载在其内部的图像,该图像将显示,一旦它满载做这样的事情:显示加载图标,而图像加载
<div style="background-image:url('imageThatWillAppearBeforeLoad')"></div>
我怎样才能使用Angular2/Ionic2?
创建一个组件,该组件显示占位符图像,直到加载请求的图像并隐藏请求的图像。加载图像后,您将隐藏占位符并显示图像。
@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;
}
}
您的代码工作正常,但对于我发布的案例,我有一个'
',它包含背景图片,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;
}
的可能的复制[离子2:(懒惰)加载微调的图片](http://*.com/问题/ 38846271/ionic-2-lazy-loading-spinner-for-pictures) –