lazy loading images in react

lozad-image-wrapper.tsx

// React wrapper for lozad.js for images

import * as React from 'react';
import * as lozad from 'lozad';

// src: the image path that will be lazyloaded
// customClass: css class that will be applied to img element
// defaultImageSrc: image path (preferebly local to this app) that needs to be displayed
//  by default before the required imgae lazy loaded
interface LozadWrapperProps {
    src: string;
    customClass: any;
    defaultImageSrc: string;
}
class LozadWrapper extends React.Component<LozadWrapperProps> {
    img: any;

    constructor(props: LozadWrapperProps) {
        super(props);
        this.imageLoaded = this.imageLoaded.bind(this);
        this.imageRef = this.imageRef.bind(this);
    }

    imageRef(el: HTMLImageElement) {
        this.img = el;
    }

    imageLoaded(el: HTMLImageElement) {
        el.src = this.props.src;
    }

    componentDidMount() {
        const myComponent = this;
        const observer = lozad(this.img, {
            load: function(el: HTMLImageElement) {
                myComponent.imageLoaded(el);
            }
        });
        observer.observe();
    }

    render() {
        const  { customClass, defaultImageSrc } = this.props;
        return (
            <img 
                ref={this.imageRef} 
                src={defaultImageSrc} 
                className={customClass}
            />
        );
    }
}

export default LozadWrapper;