图片加载插件imagesLoaded的配置和使用

import React from 'react';
import './styles.less';
import imagesloaded from 'imagesloaded'

// 安装  npm install imagesloaded
// 相关链接： https://segmentfault.com/a/1190000007316974
const arr = [
    'https://www.baidu.com3333/link?url=5v5Usz6yi2Yxtw0s7peMfok3NdV_Ws8dL4J5YFSt6vgWQX6dZ1tnXY2VofcFrLqAc_ePMqmpuQB_GfccVRL0G5fWdQlhU605ObjS2Gup46mfOdQEEXADCxRD-uwVKMbV-5gyDRsWVifAjpS6Rtk-VYmg6ELgsa56i280ibJ6I_LphZf2oO5OWg3FIy5pNik9qhzSAHeVgDcAuiMRzK3S0-2E7yPUfy8RNcTtBmkec7yA7kUBR5AFo9Bqow5MXU3OV5B1ZMHzZoUWW7Gzc9PaAal5nHCXLQcOSfIx0QyBK5B0R_Sq5wTVbsGxBO-ujurQPMg7jknJ6PwrDkPGiTSDqwlQrOKYmTfjJ3UxVvz3Xobrm10Z_rCG6Nn97pCWQZ-lpKiXGWsdYrDdxnEWJX-hZwE1znDa8_s_lO8jWZdqty1Oq-TeXiHT9aqPvKf5UB9ntWQbDszu5HJZq8JOSyoPiGZ2Th3f5pHP1G3zUl89YRBbY_camqx12CBV3kc7VEOdQ6pVQ5frfhJRMmFT3R4Ym_&wd=&eqid=b87ddf8f000e6d49000000025df42c3e',
    // 'https://www.baidu.com/link?url=YKhfddJn0zTx3f_s2SBCnyQ2rDadsqme6qk1owCqrGNUZ4jIxV8yl7EZkZI1_VjyE2oyVYu6S12IR06Ck3dJB7b5nevWlQKzZo8qXaBTS4WTB6KbKm3rdrA4r0cq_zOVUEDQ96tgZ7NMOQnUw6d63mIhaGDBeUO2sL9saU5vuohGXXqHjs45dUpTfhr9HHreQYzmMp-0DPexmb4rLvJJ6YrlXAtYf90j-6t5SVC-npYT7VH1ohGdMp5UhG4HvganDXCRKoJk5pKTDd5tXpPop67xfP9uiFJMYCYuKeyXn6LKHdTIOuAQMv9rp1WISTbs8jsMutZleBjxIBXCuliTbqnaQB5YC60g5fHRugrqPBnqCVo-Ge-kpiMrRnQKLjTUB0QIFLDMrx1y2VeuJqNLMXdPwmtnlRq8j1mXzsvq26cberYRCmYEAGOET6Z6Hl7bRZBvO5qeArF0ZoVI4mCeiauy_3ynfAnUc_XmKoeYNkNfz2vqvWKsEzjRQEOkTwck-UtUUC07IMEqH8Y_JrsFmnEfYmB71VrW4OxzRL6NIcFXljdh14P_4P8a4sAVSZTM&wd=&eqid=b87ddf8f000e6d49000000025df42c3e',
    // 'https://www.baidu.com/link?url=5xUUR6tCBKgGi19g5XYJLDtzh6YyhXw1JyM5pPBSS4RfJRsVqrY2MVrtto6r2YThJSrNBQJXgjuQ6eY3TljbaA6sptzzYYW9hPafrPPfj14yv3CxQdTv3dcnIDF3J0zj8Nv9BGT3cgkChznYDswaen4WbHv-FEgh7Po9S0gpyZ5JR3V8P3FVAZEq_OLul_XTMwqQ1xxrDi149_4Ih9OBhA6G14cVUKs5e-Plo4fonetNvLi9Ue31dU7gdb2junyVkL13sVafcRkcnz8atnkbyQRE0pg8vmvP8th2bkrQUFMzL0RZRdq-PXHO1orQ0S0wPS1PFnmNulTn2Ph-4mf4_Jl-QeHaQ47QfO5ltA8cK44Qs0LbCTh4R75Mx2vnvdkPNwprkAI4QnNiNry26IDXMwK3w5Csm9yoZ12s00oBMLZVTifJiJs0XF1npc_8R7dyvsUrDOKC1ZbUovb8h__JWGjw296fOnCh16uhllsKCslTVMtlRU9JEij1OJ7wHCQyaT1SianzLRrnfc4zpxviha&wd=&eqid=b87ddf8f000e6d49000000025df42c3e',
    'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3008142408,2229729459&fm=26&gp=0.jpg',
    'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3437217665,1564280326&fm=26&gp=0.jpg',
    'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2458227883,4095122505&fm=26&gp=0.jpg',
    'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1761250919,1896060533&fm=26&gp=0.jpg',
    'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2852083094,372235004&fm=26&gp=0.jpg',
    'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2944705163,3932100810&fm=26&gp=0.jpg',
    'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3104686528,572431609&fm=26&gp=0.jpg',
]



export default class extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [],
        }
    }
    componentDidMount() {
        const imgs = imagesloaded('.image')
        // 图片已全部加载，或被确认加载失败
        imgs.on('always', () => {
            console.log('图片加载完成....')
        })

        // 图片全部加载成功
        imgs.on('done', () => {
            console.log('图片加载成功...')
        })

        // 图片已全部加载，且至少一个图片加载失败
        imgs.on('fail', option => {
            console.log('图片加载失败', option);
        })

        // 每张图片的加载
        imgs.on('progress', (instance, image) => {
            console.log('每张图片加载完');
            var result = image.isLoaded ? 'loaded' : 'broken';  // 判断是否加载成功
            console.log('加载结果 ' + result + ' 图片地址 ' + image.img.src);
        })
    }


    render() {

        return (
            <div className='image'>
                {
                    arr.map((v, k) => {
                        return <img src={v} key={k} />
                    })
                }
            </div>
        )
    }
}