Create observable that emits when image load event occurred on element.

fromImageLoadEvents.ts

/**
 * Create observable that emits when image load event occurred on element.
 *
 * @param element
 * @returns Observable on element's image load events
 */
export function fromImageLoadEvents(element: HTMLElement): Observable<HTMLImageElement> {
  return new Observable<HTMLImageElement>(observable => {
    const images: HTMLImageElement[] = [];
    let loadListener: (event: ProgressEvent) => void;
    let addLoadListener: (image: HTMLImageElement) => void;
    let removeLoadListener: (image: HTMLImageElement) => void;

    loadListener = (event: ProgressEvent) => {
      const image = event.target as HTMLImageElement;
      removeLoadListener(image);
      observable.next(image);
    };

    addLoadListener = (image: HTMLImageElement) => {
      images.push(image);
      image.addEventListener('load', loadListener);
    };

    removeLoadListener = (image: HTMLImageElement) => {
      images.splice(images.indexOf(image), 1);
      image.removeEventListener('load', loadListener);
    };

    if (element instanceof HTMLImageElement) {
      addLoadListener(element);
    } else {
      element.querySelectorAll('img').forEach(addLoadListener);
    }

    return () => images.forEach(removeLoadListener);
  });
}