react如何实现预加载图片，首页提前加载全部图片，并显示进度条。

Question

react如何实现预加载图片，首页提前加载全部图片，并显示进度条。

Answer 1

搞个数组把所有img标签记上，然后遍历去new Image() onload 就 ++。

可以自己整理，也可以通过工具，比如说gulp，批量跑一下，然后输出一个js

['https://www.lilnong.top/static/img/avator/avator-0.jpg','https://www.lilnong.top/static/img/avator/avator-1.jpg'].forEach((v,idx,arr)=>{
    var img = new Image();
    img.src = v;
    img.onload = ()=>{
        arr.successLength = (arr.successLength || 0)+1;
        console.log(`进度：${arr.successLength/arr.length}`)
    }
})

Answer 2

其实一开始找到这个方案了，觉得好奇怪....

怎么说呢，不够高大上尚，然后就没采用，

找了一大圈才发现，只有这个方案比较简单了，唉。。。。