Image loader sample

image-loader-sample.js

import React, { Component } from 'react'

export default class ShareThumbnail extends Component {
    preloader(image) {
        let { props } = this
        let { src } = props
        let loader = document.querySelector('.lazy-loader')
        if( image !== null ) {
            if( src ) {
                image.style.display = 'none'
                image.setAttribute('src', src)
                loader.style.display = 'block'
                
                image.onload = (e) => {
                    let { parentNode } = image
                    if(loader) {
                        setTimeout(() => {
                            image.style.display = 'block'
                            loader.style.display = 'none'
                        }, 200)
                    }
                }

                image.onerror = (e) => {
                    image.setAttribute('src', 'https://dummyimage.com/428x312/f8f8f8/ccc.png&text=Image+not+found')
                }
            }
        }
    }
    render() {
        return(
            <div className="share-thumbnail well">
                <div className="lazy-loader">
                    <div className="loader">
                        <div className="ball-grid-pulse">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                        <div className="text">Making the chart ...</div>
                    </div>
                </div>
                <img className="loading" ref={this.preloader.bind(this)} />
            </div>
        )
    }
}