webview部分内容偶尔加载不出来,html5在webview渲染问题

今天做项目时遇到webview部分内容偶尔加载不出来。

做的是一个抽奖的转盘,其中转盘部分是用h5的canvas写的,测试发现有部分有手机根本加载不出来(联想4.3),有的偶尔加载不出来(vivo5.0)

效果如下

  

后来反复设置webview的setting仍然无效,贴出部分代码:

webview = (WebView) findViewById(R.id.webview);
        WebSettings settings = webview.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setLoadWithOverviewMode(true);
        settings.setSupportZoom(true);
        settings.setDomStorageEnabled(true);
        settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
        settings.setAllowFileAccess(true);// 设置允许访问文件数据
        settings.setUseWideViewPort(true);
        settings.setSupportMultipleWindows(true);
        settings.setBlockNetworkImage(false);//同步请求图片
        webview.setVerticalScrollBarEnabled(true);
        webview.setHorizontalScrollBarEnabled(true);
        webview.loadUrl(url);
        webview.setWebViewClient(new WebViewClient() {
                                     public boolean shouldOverrideUrlLoading(WebView view, String url) { //  重写此方法表明点击网页里面的链接还是在当前的webview里跳转,不跳到浏览器那边
                                         view.loadUrl(url);
                                         return false;
                                     }

                                     //重写此方法可以让webview处理https请求。
                                     @Override
                                     public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
                                         handler.proceed();
                                     }

                                     //在加载页面资源时会调用,每一个资源(比如图片)的加载都会调用一次。
                                     @Override
                                     public void onLoadResource(WebView view, String url) {
                                         super.onLoadResource(view, url);
                                     }

                                     @Override
                                     public void onPageStarted(WebView view, String url, Bitmap favicon) {
//                showDialogLoading();
                                         super.onPageStarted(view, url, favicon);
                                     }

                                     @Override
                                     public void onPageFinished(WebView view, String url) {
//                hideDialogLoading();
                                         super.onPageFinished(view, url);
                                     }
                                 }
        );


后来发现 webview的onPageFinished方法结束时,也就是页面已经加载完了canvas仍然没有渲染完毕,考虑到可能是canvas渲染的过早或过晚,经过测试发现在webview还没开始加载的时候canvas已经渲染完了,所以在canvas渲染的时候可以延迟一些时间即可,虽然webview体验会看到有些延迟,但是暂时鱼和熊掌不可兼得,如有知道的兄弟可以留言。

贴上h5延时js代码

$("#canvas").hide();  
  
setTimeout(function(){$("#canvas").show(),1000);  

另外,google每次更新版本都会有webview做些改动,有些低版本不支持html5。




版权声明:本文为zhongguobaozi原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。