问题
I want to show a background image/loading spinner inside a div
that will load an image inside of it, the image will show once it's fully loaded doing something like this:
<div style="background-image:url('imageThatWillAppearBeforeLoad')"></div>
Demo (In jQuery)
How can I have the same using Angular2/Ionic2?
回答1:
Create a component that shows the placeholder image until the requested image is loaded, and hides the requested image. Once the image is loaded, you hide the placeholder and show the image.
@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;
}
See it working in Plunker.
Update
Now that I understand the requirements better, here's a solution with background image. It's a little hacky, and I like the original one better...
@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.
回答2:
Here is a copy of one of my posts
I finally solved that problem with CSS! When an image is loading in ionic 2, the ion-img tag doesn't have any class. However, when the image is finally loaded, the ion-img tag get the class "img-loaded".
Here is my solution :
<ion-img [src]="img.src"></ion-img>
<ion-spinner></ion-spinner>
And my CSS :
.img-loaded + ion-spinner {
display:none;
}
回答3:
Simply use this function
loadImage(element: HTMLElement, imagePath: string, spinnerPath: string) {
element.tagName === 'img'
? element.setAttribute('src', spinnerPath)
: (element.style.background = `url(${spinnerPath}) 50% 50% no-repeat`);
const image = new Image();
image.crossOrigin = 'Anonymous';
image.src = imagePath;
image.onload = () => {
element.tagName === 'img'
? element.setAttribute('src', imagePath)
: (element.style.background = `url(${imagePath})`);
};
}
You don't have to worry about your element is image or div or whatever it is?
example if you didn't figure out how to use it
ngOnInit() {
const myElement = document.getElementsByClassName('my-element')[0];
// or however you want to select it.
const imagePath = 'path/to/image.png';
const spinnerPath = 'path/to/spinner.gif'; // or base64 spinner url.
this.loadImage(myElement, imagePath, spinnerPath);
}
Happy coding 😉
来源:https://stackoverflow.com/questions/38536265/display-a-loading-icon-while-images-loads