解决React首屏加载白屏的问题

众所周知,在项目中如果在资源加载请求还未完成的时候,由于阻塞机制,会出现首页白屏的问题,产生很差的用户体验。本文以react为例,提供一个解决方法。

解决原理:使用  onreadystatechange  去监听 readyState,在资源加载完成之前加载一个只有框架的静态页面,页面不请求数据。当数据请求完成之后再将路由切换到真实的首页。

废话不多说,上代码:

main.js

其中Index.js就是你的真实首页,FirstScreen.js就是只有框架的静态页。

示例代码托管在GitHub上:https://github.com/skillnull/TheCurrentTime

打赏 赞(0)
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

评论

电子邮件地址不会被公开。