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。