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

Categories

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

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

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


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

1 Reply

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

56.7k users

...