Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
503 views
in Technique[技术] by (71.8m points)

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

搞个数组把所有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}`)
    }
})

image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
...