九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
webView中圖片緩存

    在前面一篇筆記http://blog.csdn.net/chenshaoyang0011/article/details/8634235中，描述了解決XML中攜帶CDATA和HTML實體字符的解決辦法，接下來要解決的問題就是緩存圖片。

    在這篇文章中主要記錄了對以下問題的解決方法:

    1、WebView中圖片點擊事件的響應

    2、WebView圖片緩存，并替換WebView默認圖片（即圖片未加載前顯示的樣式）

    在新聞內容顯示的時候，圖片是必不可少的，在內容加載完畢之后，圖片的緩存也是非常必要的，畢竟對于手機應用，流量是非常寶貴的資源。對于圖片，WebView本身有一個緩存數(shù)據(jù)庫進行緩存。但是我使用的是另外一個思路進行圖片的緩存——阻止WebView加載圖片而是在WebView將文本加載好了之后，通過本地方法下載圖片保存到本地后再顯示到WebView中。這樣，在使用WebView進行顯示的時候能夠更加的靈活。

    在實現(xiàn)上述提到的功能之前，需要了解Android的WebView如何實現(xiàn)Java代碼與JavaScript代碼的相互調用，推薦兩篇博文http://blog.csdn.net/wangtingshuai/article/details/8631835 （實現(xiàn)簡單調用）和http://blog.csdn.net/wangtingshuai/article/details/8635787 （實現(xiàn)圖片點擊）本文就不再贅述了。接下來就詳細的探討下上述功能的實現(xiàn)方法。

    一、響應WebView中圖片點擊事件。

    對于此功能的實現(xiàn)，可以參照http://blog.csdn.net/wangtingshuai/article/details/8635787 這篇文章。其中主要涉及到JS與JAVA代碼的互調，這里我就不重新造輪子了。

    二、緩存WebView中的圖片，替換默認圖片

    WebView本身有自己的緩存機制，但是由于沒有找到相關的文檔，感覺不是很好用，所以我就想了另外一個方法。主要思路是這樣的：1、使用jsoup來解析html；2、獲取所有圖片的URL（即img標簽的url），替換為需要顯示默認狀態(tài)的圖片的URI，最后在圖片下載好后將這些URI按照某種映射規(guī)則替換為本地的URI（即相當于將這個img指向了本地的一張圖片）；3、關閉WebView加載圖片，加載html；4、在文本加載完畢之后，開始依次下載所有的img到本地，每張圖片下載好后，調用js代碼刷新圖片。

    下面就一步一步的來實現(xiàn)。

    1、使用jsoup解析html

    這個我在http://blog.csdn.net/chenshaoyang0011/article/details/8640987 已經簡單的介紹了，詳細的使用還需參照http://jsoup.org/ （后文中代碼使用了很多jsoup的api）。

    2、獲取所有圖片的url，并替換為本地圖片（需要用來替換WebView默認顯示效果的圖片）。

    獲取到的圖片的url需要保存到一個屬性List<String>中：

        

[java] view plaincopy
  1. public List<String> imgUrls = new ArrayList<String>();  

  使用以下代碼片段可以從html中獲取所有img標簽的url，并且按照如下映射規(guī)則替換為本地圖片的URI（當然這個映射規(guī)則由自己定啦~~）："http://.../xx.xx"替換為"file://mnt/sdcard/test/xx.xx"其實就是將圖片下載后保存的路徑。

                

[java] view plaincopy
  1. Document doc = null;  
  2.         imgUrls.clear();  
  3. Elements es = doc.getElementsByTag("img");  
  4.   
  5.         for (Element e : es) {  
  6.             String imgUrl = e.attr("src");  
  7.             imgUrls.add(imgUrl);  
  8.             String imgName;  
  9.             File file = new File(imgUrl);  
  10.             imgName = file.getName();  
  11.             if(imgName.endsWith(".gif")){  
  12.                 e.remove();  
  13.             }else{  
  14.                   
  15.                 String filePath = "file:///mnt/sdcard/test/" + imgName;  
  16.                 e.attr("src","file:///android_asset/web_logo.png");  
  17.                 e.attr("src_link", filePath);  
  18.                 e.attr("ori_link",imgUrl);  
  19.                 String str = "window." + Js2JavaInterfaceName + ".setImgSrc('"  
  20.                         + filePath + "')";  
  21.                 e.attr("onclick", str);  
  22.             }  
  23.         }  

    3、關閉WebView加載網絡圖片，加載html先顯示文本內容

    這樣做主要是為了改善用戶體驗，阻止WebView自己加載圖片是避免重復下載圖片浪費流量。

    首先關閉WebView加載網絡圖片，其實由于我們已經替換掉了img中url，可以忽略這一步。但是為了避免有漏網之魚，還是加上好些：

    webView.getSettings().setBlockNetworkImage(true);

    接下來加載html：

   

[java] view plaincopy
  1. //result為解析后獲得的html文本  
  2. webView.loadDataWithBaseURL(null, result, "text/html", "utf-8", null);  

    4、在文本加載完畢之后，開始依次下載所有的img到本地，每張圖片下載好后，調用js代碼刷新圖片。

    文本內容加載完畢之后，就可以開始加載圖片內容了，在html內容加載完之后，會調用WebViewClient.onPageFinished(WebView view, String url)這個方法。我們就可以在這個方法中執(zhí)行圖片的下載保存工作。

    以下的代碼片段就實現(xiàn)了開始下載的功能：

            

[java] view plaincopy
  1. webView.setWebViewClient(new WebViewClient(){  
  2.               
  3.             public void onPageFinished(WebView view, String url){  
  4.                 //DownloadWebImgTask是用于下載圖片的類  
  5.                 DownloadWebImgTask downloadTask = new DownloadWebImgTask();  
  6.                   
  7.                                 //獲取所有圖片的url  
  8.                 List<String> urlStrs = parser.getImgUrls();  
  9.                   
  10.                 String urlStrArray[] = new String[urlStrs.size() + 1];  
  11.                 urlStrs.toArray(urlStrArray);  
  12.                   
  13.                                 //開始下載  
  14.                 downloadTask.execute(urlStrArray);  
  15.                   
  16.             }  
  17.               
  18.         });  

    上面的代碼中DownloadWebImgTask的實現(xiàn)如下，其功能就是批量的下載圖片，并且在每張圖片下載好后刷新WebView。由于WebView本身沒有提供接口實現(xiàn)圖片的單獨刷新（至少我沒有找到。。。），所以只能借助js來實現(xiàn)此功能。

    

[java] view plaincopy
  1. public class DownloadWebImgTask extends AsyncTask<String, String, Void>{  
  2.           
  3.             public static final String TAG = "DownloadWebImgTask";  
  4.       
  5.             @Override  
  6.             protected void onProgressUpdate(String... values) {  
  7.                 super.onProgressUpdate(values);  
  8.                                   
  9.                                 //加載下面的js代碼實現(xiàn)單張圖片的刷新  
  10.                 webView.loadUrl("javascript:(function(){" +    
  11.                         "var objs = document.getElementsByTagName(\"img\"); " +     
  12.                         "for(var i=0;i<objs.length;i++)  " +     
  13.                 "{"    
  14.                         + "    var imgSrc = objs[i].getAttribute(\"src_link\"); "   
  15.                         + "    var imgOriSrc = objs[i].getAttribute(\"ori_link\"); "  
  16.                         + " if(imgOriSrc == \"" + values[0] + "\"){ "  
  17.                         + "    objs[i].setAttribute(\"src\",imgSrc);}" +  
  18.                 "}" +     
  19.                 "})()");   
  20.             }  
  21.   
  22.             @Override  
  23.             protected void onPostExecute(Void result) {  
  24.                                 //這段代碼只是確保所有圖片都順利的顯示出來  
  25.                 webView.loadUrl("javascript:(function(){" +    
  26.                         "var objs = document.getElementsByTagName(\"img\"); " +     
  27.                                 "for(var i=0;i<objs.length;i++)  " +     
  28.                         "{"    
  29.                                 + "    var imgSrc = objs[i].getAttribute(\"src_link\"); " +  
  30.                                 "    objs[i].setAttribute(\"src\",imgSrc);" +  
  31.                         "}" +     
  32.                         "})()");   
  33.                 super.onPostExecute(result);  
  34.             }  
  35.   
  36.             @Override  
  37.             protected Void doInBackground(String... params) {  
  38.                 URL url = null;  
  39.                 InputStream inputStream = null;  
  40.                 OutputStream outputStream = null;  
  41.                 HttpURLConnection urlCon =  null;  
  42.                   
  43.                 //若傳入參數(shù)為空，則直接返回  
  44.                 if(params.length == 0)  
  45.                     return null;  
  46.                   
  47.                 File dir = new File(Environment.getExternalStorageDirectory() + "/test/");  
  48.                 if(!dir.exists()){  
  49.                     dir.mkdir();  
  50.                 }  
  51.                   
  52.                 for(String urlStr : params){  
  53.                       
  54.                     try {  
  55.                           
  56.                         if(urlStr == null){  
  57.                             break;  
  58.                         }  
  59.                           
  60.                         File tempFile = new File(urlStr);  
  61.                         int index = urlStr.lastIndexOf("/");  
  62.                         String fileName = urlStr.substring(index + 1, urlStr.length());  
  63.                           
  64.                         File file = new File(Environment.getExternalStorageDirectory() + "/test/" + fileName);  
  65.                           
  66.                         if(file.exists()){  
  67.                             continue;  
  68.                         }  
  69.                           
  70.                         try {  
  71.                             file.createNewFile();  
  72.                         } catch (IOException e) {  
  73.                             e.printStackTrace();  
  74.                         }  
  75.                           
  76.                         url = new URL(urlStr);  
  77.                         urlCon = (HttpURLConnection)url.openConnection();  
  78.                         urlCon.setRequestMethod("GET");  
  79.                         urlCon.setDoInput(true);  
  80.                         urlCon.connect();  
  81.                           
  82.                         inputStream = urlCon.getInputStream();  
  83.                         outputStream = new FileOutputStream(file);  
  84.                         byte buffer[]=new byte[1024];  
  85.                         int bufferLength = 0;  
  86.                         while((bufferLength = inputStream.read(buffer)) > 0){  
  87.                             outputStream.write(buffer, 0, bufferLength);  
  88.                         }  
  89.                         outputStream.flush();  
  90.                         publishProgress(urlStr);  
  91.                     } catch (MalformedURLException e) {  
  92.                         // TODO Auto-generated catch block  
  93.                         e.printStackTrace();  
  94.                     } catch (IOException e) {  
  95.                         // TODO Auto-generated catch block  
  96.                         e.printStackTrace();  
  97.                     }finally{  
  98.                           
  99.                         try {  
  100.                             if(inputStream != null){  
  101.                                 inputStream.close();  
  102.                             }  
  103.                         } catch (IOException e1) {  
  104.                             // TODO Auto-generated catch block  
  105.                             e1.printStackTrace();  
  106.                         }  
  107.                         try {  
  108.                             if(outputStream != null){  
  109.                                 outputStream.close();  
  110.                             }  
  111.                         } catch (IOException e) {  
  112.                             // TODO Auto-generated catch block  
  113.                             e.printStackTrace();  
  114.                         }  
  115.                           
  116.                     }  
  117.                       
  118.                 }  
  119.                   
  120.                 return null;  
  121.             }  
  122.               
  123.         }  

    這樣圖片就被正常的顯示出來，并且在本地已經有緩存了。

    最后照例給出一個簡單的demo：http://download.csdn.net/detail/chenshaoyang0011/5130931

    

本站僅提供存儲服務，所有內容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權內容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
iOS hybrid App 的實現(xiàn)原理及性能監(jiān)測
1.5W+字的全鏈路前端性能優(yōu)化送給你
JS快速獲取圖片寬高的方法
詳談高大上的圖片加載框架Glide
JS實現(xiàn)圖片預加載功能
data url簡介及data url的利弊 | 盛夏光年
更多類似文章 >>
生活服務
熱點新聞
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權！
如果VIP功能使用有故障，
可點擊這里聯(lián)系客服！

聯(lián)系客服