Lazyloading images for urls that are not yet ready?

[donjae]

Hi,
Loving the package first off!

I wanted to ask though if it is possible to lazy load images for urls that have yet to be generated. For example, I have users submitting things, but the static URL serving the images aren't ready yet (GET 404 error).

Is there a possible to lazyload/display images those images when the url is ready. Perhaps by showing either the defaultImage/errorImage until the lazyloaded images work?

[tjoskar]

Hi,

The directive do not currently support to reload the images when the url changes (become ready), I will however accept a pull request for that :)

What you could do in the meantime is something like this:

<img *ngIf="image" [lazyLoad]="image">

or if you have a default image:

<img *ngIf="!image" [src]="defaultImage">
<img *ngIf="image" [lazyLoad]="image" [defaultImage]="defaultImage">

[born2net]

I was just looking for exact same functionality :/
a url which is not available right away... need polling

[born2net]

@donjae did you ever find a solution? write your own?

[born2net]

@tjoskar tried

<img *ngIf="!image" [src]="defaultImage">
<img *ngIf="image" [lazyLoad]="image" [defaultImage]="defaultImage">

no luck, as it may take up to 10 seconds for my images to be available on the server

[donjae]

As for my application, I actually just set an [errorImage] as the default for now :/

[born2net]

mmm ok tx :/

[tjoskar]

@donjae
Ahhh... I think I misunderstood you.
You have an URL to an image that returns 404 for some reason and you want to poll for changes? So if the library didn't succeed to fetch the image, you want the library to try again in, let's say 2 sec?
I don't think it is something that I want to support (or maybe I will, if you can come up with something clever in:

ng-lazyload-image/src/lazyload-image.ts

Line 79 in d4b3d71

return Observable.of(1);

with retryWhen).

I think a better solution is to create your own scroll-event-emitter that emits a new value when the image is available.

[born2net]

ok tx!

[born2net]

I ended up develping my own as I didn't need the scrolling,
here it is:

import {Directive, ElementRef, EventEmitter, Input, NgZone, Output} from "@angular/core";
import {Observable} from "rxjs/Observable";
import {Subject} from "rxjs/Subject";

@Directive({
    selector: '[lazyImage]'
})
export class LazyImage {

    private m_url;
    private cancel$ = new Subject();

    constructor(private el: ElementRef, private ngZone: NgZone) {
    }

    @Input() defaultImage: string;
    @Input() loadingImage: string;
    @Input() errorImage: string;
    @Input() retry: number = 10;
    @Input() delay: number = 500;


    @Input()
    set url(i_url: string) {
        this.m_url = i_url;
        this.loadImage(i_url);
    }

    @Output() loaded: EventEmitter<any> = new EventEmitter<any>();
    @Output() completed: EventEmitter<any> = new EventEmitter<any>();
    @Output() errored: EventEmitter<any> = new EventEmitter<any>();

    set setUrl(i_url) {
        this.m_url = i_url;
        this.loadImage(i_url);
    }

    public resetToDefault() {
        this.setImage(this.el.nativeElement, this.defaultImage);
        this.cancel$.next({})
    }

    ngAfterViewInit() {
        this.setImage(this.el.nativeElement, this.defaultImage);
    }

    ngOnInit() {
    }

    setImage(element: HTMLElement, i_url) {
        // const isImgNode = element.nodeName.toLowerCase() === 'img';
        // if (isImgNode) {
        // } else {
        //     element.style.backgroundImage = `url('${imagePath}')`;
        // }
        (<HTMLImageElement>element).src = i_url;
        return element;
    }

    loadImage(i_url) {
        const pollAPI$ = Observable.defer(() => {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.src = i_url;
                img.onload = () => {
                    resolve(i_url);
                };
                img.onerror = err => {
                    this.setImage(this.el.nativeElement, this.loadingImage);
                    reject(err)
                };
            })


        }).retryWhen(err => {

            return err.scan((errorCount, err) => {
                if (errorCount >= this.retry) {
                    throw err;
                }
                return errorCount + 1;
            }, 0).delay(this.delay);
        }).takeUntil(this.cancel$)

        pollAPI$.subscribe((v) => {
            this.setImage(this.el.nativeElement, this.m_url)
            this.loaded.emit();
        }, (e) => {
            this.setImage(this.el.nativeElement, this.errorImage);
            this.errored.emit();
            // console.error(e)
        }, () => {
            this.completed.emit();
        })

    }

    destroy() {
    }
}

and to use it:

 <img lazyImage class="center-block" style="width: 229px; height: 130px"
     [loadingImage]="'https://secure.digitalsignage.com/studioweb/assets/screen_loading.png'"
     [defaultImage]="'https://secure.digitalsignage.com/studioweb/assets/screen.png'"
    [errorImage]="'https://secure.digitalsignage.com/studioweb/assets/screen_error.png'"
    [retry]="5"
    [delay]="1500"
    (loaded)="_onLoaded()"
    (error)="_onError()"
    (completed)="_onCompleted()">

and you can also load the image via API:

...

@ViewChild(LazyImage)
    lazyImage: LazyImage;
...

this.lazyImage.resetToDefault();
this.lazyImage.url = 'http://www.example.com/foo.png

[born2net]

latest revision:
https://github.com/born2net/studioweb/blob/master/src/comps/lazy-image/lazy-image.ts

[donjae]

@tjoskar do you want to merge/implement what @born2net created? no problem if not, and I can close this issue out

[tjoskar]

(sorry for late reply)
@donjae, I will probably not implement this but I will accept a pull request.
I guess it should be possible to replace line 73 with something like:

.mergeMap(() => {
  return loadImage(imagePath)
    .retryWhen(errors => {
        return errors.scan((errorCount, err) => {
            if(errorCount >= 5) {
                throw err;
            }
            return errorCount + 1;
        }, 0)
      .delay(1000);
    })
})

[tjoskar]

I will close this issue but I will still accept pull request if someone wants to implement it.