WebView中實現消極式載入,圖片點擊時才載入。

來源:互聯網
上載者:User

標籤:

 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中實現消極式載入,圖片點擊時才載入。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.