1. 程式人生 > >webview部分內容偶爾載入不出來,html5在webview渲染問題

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。