標籤:
1 String newHtml = html + 2 "<script type=\"text/javascript\">" + 3 "(function (){"+ 4 "var imageList = document.getElementsByTagName(\"img\");"+ 5 "for(var i=0; i<imageList.length; i++){"+ 6 "var image = imageList[i];"+ 7 "image.href = image.src;"+ 8 "image.src = \"content://com.example.demo/res/def.jpg\";"+ 9 "image.alt = \"點擊載入圖片\";"+10 "image.onclick = function(){"+11 "this.src = this.href;" +12 "return false;"+13 "}"+14 "}"+15 "}());"+16 "</script>";
17 mWebView.getSettings().setJavaScriptEnabled(true);
18 mWebView.loadData(newHtml, "text/html; charset=UTF-8", null);
以上的代碼是在擷取到的html頁面後面添加一個自動執行的js函數,把所有圖片標籤的地址替換為一個佔位圖,當圖片被點擊時再載入真實的圖片。
要載入應用內建的圖片,我們可以用ContentProvider來實現。在com.example.demo.provider包目錄下建立一個ContentProvider,重寫openAssetFile方法來擷取Assets檔案夾裡的佔位圖,然後在AndroidManifest.xml裡註冊ContentProvider。
1 @Override 2 public AssetFileDescriptor openAssetFile(Uri uri, String mode) 3 throws FileNotFoundException { 4 String fileName = uri.getLastPathSegment(); 5 try { 6 return getContext().getAssets().openFd(fileName); 7 } catch (IOException e) { 8 e.printStackTrace(); 9 return super.openAssetFile(uri, mode);10 }11 }
1 <provider 2 android:name="com.example.demo.database.ImageContentProvider"3 android:authorities="com.example.demo" />
但是這個方法只能用在Android4.4以下的版本,4.4以後的版本換了WebView的核心後這個辦法就無效了。所以我們可以用WebViewClient中一個API11開始提供的一個介面shouldInterceptRequest來實現攔截。
1 public WebResourceResponse shouldInterceptRequest(WebView view, 2 String url) { 3 WebResourceResponse response = null; 4 if (url.contains("def.jpg")) { 5 try { 6 InputStream image = getAssets().open("def.jpg"); 7 response = new WebResourceResponse("image/jpeg", "UTF-8", image); 8 } catch (IOException e) { 9 e.printStackTrace();10 } 11 }12 return response;13 }
最省事的話就是隨便找個雲儲存,自己上傳一張圖片到上面。然後用這張圖片的URL作為佔位圖,反正WebView會自動快取資料,所以這張圖片只會讀取一次。
WebView中實現消極式載入,圖片點擊時才載入。