RSS reader practice notes — WebView picture cache

This article is fromhttp://blog.csdn.net/chenshaoyang0011

In the previous note http://www.voidcn.com/article/p-tghalzgl-em.html, the solution is describedXMLXML span>Carry inCDATAandHTMLThe solution to physical characters, the next problem to be solved is to cache pictures.

This article mainly records the solutions to the following problems :

1,< /span>Response to the picture click event in WebView

2,WebView Picture cache, andReplace the default WebView picture (that is, the style displayed before the picture is loaded)

In the news content When displaying, pictures are indispensable. After the content is loaded, the caching of pictures is also very necessary. After all, for mobile applications, traffic is a very precious resource. For pictures, WebView itself has a cache database for caching. But what I use is another idea for image caching-to prevent WebView from loading the image, but after the WebView loads the text, download the image through the local method and save it locally before displaying it in the WebView. In this way, it can be more flexible when using WebView for display.

Before implementing the functions mentioned above, you need to understand How does Android’s WebView implement mutual calls between Java code and JavaScript code? Two blog posts are recommended http://blog.csdn.net/wangtingshuai/article/details/8631835 (implementation of simple calls) and http://www.voidcn.com /article/p-tvdfmyhz-nm.html (Implement image click) This article will not repeat it. Next, we will discuss the implementation methods of the above functions in detail.

一, Respond to the picture click event in WebView.

For the realization of this function, please refer to http ://www.voidcn.com/article/p-tvdfmyhz-nm.html This article. Which mainly involves the intermodulation of JS and JAVA code, here I will not reinvent the wheel.

Two , Cache the picture in the WebView, replace the default picture

WebView itself has its own caching mechanism, but because I didn’t find the relevant documents, it didn’t feel very useful, so I thought of another method. The main idea is as follows: 1. Use jsoup to parse html; 2. Get the URLs of all pictures (that is, the url of the img tag), replace them with the URIs of the pictures that need to display the default state, and finally follow these URIs after the pictures are downloaded Replace a certain mapping rule with a local URI (that is, point the img to a local picture); 3. Close the WebView to load the picture and load the html; 4. After the text is loaded, start to download all the imgs to Locally, after each picture is downloaded, call the js code to refresh the picture.

The following is a step by step implementation.

1 Use jsoup to parse html

This I am at http: //www.voidcn.com/article/p-uzbecwwk-em.html has been briefly introduced, and for detailed usage, please refer to http://jsoup.org/ (the code in the following uses many jsoup apis).

2 Get the urls of all pictures and replace them with local pictures (need to replace the pictures with the default display effect of WebView).

The url of the obtained picture needs to be saved in an attribute List:

Use the following code snippets to get the URLs of all img tags from html, and follow the mapping rules below Replace with the URI of the local picture (Of course, this mapping rule is up to you~~): “http://…/xx.xx” is replaced with “file://mnt/sdcard/test/xx.xx” is actually the path where the image is saved after downloading.

< br style="font-family:arial;font-size:14px;line-height:2 6px;background-color:#ffffff;">

3, close WebView to load network pictures, load html and display first Text content

This is mainly to improve the user experience. Preventing WebView from loading images by itself is to avoid repetitive downloading of images to avoid wasting traffic.

First, close the WebView to load the network image. In fact, since we have replaced the url in the img, this step can be ignored. But in order to avoid fish that slip through the net, it is better to add:

webView.getSettings().setBlockNetworkImage(true);

Next load html:
< /p>

4. After the text is loaded After that, start to download all imgs to the local in turn. After each picture is downloaded, call the js code to refresh the picture.

After the text content is loaded, you can start to load the image content. After the html content is loaded After that, the method WebViewClient.onPageFinished(WebView view, String url) will be called. We can download and save the image in this method.

The following code snippet realizes the function of downloading:

The implementation of DownloadWebImgTask in the above code is as follows, its function is to download pictures in batches, and refresh the WebView after each picture is downloaded. Since WebView itself does not provide an interface to realize the separate refresh of the picture (at least I did not find it…), this function can only be realized with the help of js.

   这样图片就被正常的显示出来，并且在本地已经有缓存了。

   最后照例给出一个简单的demo：http://download.csdn.net/detail/chenshaoyang0011/5130931

1. public List imgUrls = new ArrayList();  

[java] view plain copy

1. Document doc = null;  

2.        imgUrls.clear();  

3. Elements es = doc.getElementsByTag(“img”);  

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{  

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.        }  

[java] view plain copy

1. //result为解析后获得的html文本

2. webView.loadDataWithBaseURL(null, result, “text/html”, “utf-8”, null);  

[java] view plain copy

1. webView.setWebViewClient(new WebViewClient(){  

3. publicvoid onPageFinished(WebView view, String url){  

4. //DownloadWebImgTask是用于下载图片的类

5.                DownloadWebImgTask downloadTask = new DownloadWebImgTask();  

7. //获取所有图片的url

8.                List urlStrs = parse r.getImgUrls();  

10.                String urlStrArray[] = new String[urlStrs.size() + 1];  

11.                urlStrs.toArray(urlStrArray);  

13. //开始下载

14.                downloadTask.execute(urlStrArray);  

16.            }  

18.        });  

[java] view plain copy

1. publicclass DownloadWebImgTask extends AsyncTask{  

3. publicstaticfinal String TAG = “DownloadWebImgTask”;  

5. @Override

6. protectedvoid onProgressUpdate(String… values) {  

7. super.onProgressUpdate(values);  

9. //加载下面的js代码实现单张图片的刷新

10.                webView.loadUrl(“javascript:(function(){“ +    

11. “var objs = document.getElementsByTagName(\”img\”); “ +    

12. “for(var i=0;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].setAt tribute(\”src\”,imgSrc);}” +  

18. “}” +    

19. “})()”);  

20.            }  

22. @Override

23. protectedvoid onPostExecute(Void result) {  

24. //这段代码只是确保所有图片都顺利的显示出来

25.                webView.loadUrl(“javascript:(function(){“ +    

26. “var objs = document.getElementsByTagName(\”img\”); “ +    

27. “for(var i=0;i +    

28. “{“

29.                                + ”    var imgSrc = objs[i].getAttribute(\”src_link\”); “ +  

30. ”    objs[i].setAttribute(\”src\”,imgSrc);” +  

31. “}” +    

32. “})() “);  

33. super.onPostExecute(result);  

34.            }  

36. @Override

37. protected Void doInBackground(String… params) {  

38.                URL url = null;  

39.                InputStream inputStream = null;  

40.                OutputStream outputStream = null;  

41.                HttpURLConnection urlCon =  null;  

43. //若传入参数为空，则直接返回

44. if(params.length == 0)  

45. returnnull;  

47.                File dir = new File(Environment.getExternalStorageDirec tory() + “/test/”);  

48. if(!dir.exists()){  

49.                    dir.mkdir();  

50.                }  

52. for(String urlStr : params){  

54. try {  

56. if(urlStr == null){  

57. break;  

58.                        }  

60.                        File tempFile = new File(urlStr);  

61. int index = urlStr.lastIndexOf(“/”);  

62.                        String fileName = urlStr.substring(index + 1, urlStr.length());  

64.                        File file = new File(Environment.getExternalStorageDirectory() + “/test/” + fileName);  

66. if(file.exists()){  

67. continue;  

68.                        }  

70. try {  

71.                            file.createNewFile();  

72.                        } catch (IOException e) {  

73.                            e.printStackTrace();  

74.                        }  

76.                        url = new URL(urlStr);  

77.                        urlCon = (HttpURLConnection)url.openConnection();  

78.                        urlCon.setRequestMethod(“GET”);  

79.                        urlCon.setDoInput(true);  

80.                        urlCon.connect();  

82.                        inputStream = urlCon.getInputStream();  

83.                        outputStream = new FileOutputStream(file);  

84. byte buffer[]=newbyte[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{  

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(outputStre am != null){  

109.                                outputStream.close();  

110.                            }  

111.                        } catch (IOException e) {  

112. // TODO Auto-generated catch block

113.                            e.printStackTrace();  

114.                        }  

116.                    }  

118.                }  

120. returnnull;  

121.            }  

123.        }  

[java] view plain copy