h5+app项目中遇到切换页面白屏问题的解决方案

总结就是使用预加载的方案 ,本篇仅作记录学习。

因为公司项目代码中用到了mui , 可以使用 mui 的 预加载

mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,
      id:preload-page-id,
      styles:{},//窗口参数
      extras:{},//自定义扩展参数
      subpages:[{},{}]//预加载页面的子页面
    }
  ],
  preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});

在创建新页面跳转时,可以加上show参数,event指定为loaded:

mui.openWindow({
    url: url,
    show:{
        event:"loaded"//在当前页面加载,加载完在跳转
        },
    waiting: {
        autoShow: true, //自动显示等待框,默认为true
        title: '加载中...'
        }
});

如果使用的是plus.webview:

    var sub = plus.webview.create(url, id, params);
    // 新增加载监听 等页面加载完毕后显示,防止出现切换页面白屏
    sub.addEventListener('loaded',function(){
         sub.show();
    },false);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容