Clash Royale CLAN TAG#URR8PPP

Display a Loading icon while images loads

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

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


Demo (In jQuery)

How can I have the same using Angular2/Ionic2?

3 Answers
3

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.

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

div

div

img

div

DOM

(load)

(click)

div

(load)

div

onload

div

img

div

img

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;



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 😉

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.