cordova android 内嵌vue页面启动页之后白屏问题处理

weixin_45410246

已于 2024-10-31 14:47:46 修改

阅读量293

点赞数 2

文章标签： vue.js 前端 javascript Cordova

于 2024-10-31 14:47:24 首次发布

本文链接：https://blog.csdn.net/weixin_45410246/article/details/143399740

版权

困扰很久的问题
一直都用splash 做延迟加载但在一些android机器上还是会有
这短暂的白屏其实就是vue页面尚未完全渲染的间隙
处理方案
在html中添加

<body>
  <div id="splash-screen" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/path/to/your/ad.png'); background-size: cover; z-index: 9999;"></div>
  <div id="app"></div>
</body>

这里添加一个div在 app同级
然后再vue 挂载完成之后移除该div

function init() {
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app');

  // 移除 splash-screen
  const splashScreen = document.getElementById('splash-screen');
  if (splashScreen) {
    splashScreen.remove();
  }
}

当然你也可以利用这短暂的间隙做一些广告/动画之类的

关注博主即可阅读全文