Webview 图片异步加载及bug解决

在项目中新闻显示需要使用图片的异步加载，并且在加载图片前和加载图片失败时显示默认图片。
关于webview中图片的异步加载的思路如下：
方案一：由前端同学全权负责（使用js实现异步加载）
方案二：android端进行处理
（1） 从相应请求获取到页面的数据，处理其中的img标签，将img标签中的src属性存储在img标签中的ori_link属性中，给img标签中的src属性赋值你默认图片所在路径，给img标签中的src_link属性赋值你的图片下载后保存的路径

private voidhandleImageClickEvent(Document doc) {
Elements container =doc.getElementsByTag("article");
for (Element ce : container) {
Elements es = ce.getElementsByTag("img");
for (Element e : es) {
String imgUrl = e.attr("src");
if(!imgUrl.startsWith("http://")){
imgUrl = Constants.PIC_URL+imgUrl;
}
imgUrls.add(imgUrl);
String imgName;
imgName = StrMD5.getStrMD5(imgUrl);;
String filePath = "file:///mnt/sdcard/"
+ Constants.WEB_IMAGE_CACHDIR + "/" +imgName;
e.attr("src", "file:///android_asset/news_info_default_image.jpg");
e.attr("src_link", filePath);
e.attr("ori_link", imgUrl);
}
}

（2） 使用webview的loadDataWithBaseURL(Constants.BASE_URL, result,"text/html", "utf-8", null);
Constants.BASE_URL 是为了使在一些页面中使用js或其他方式访问自己工程相对路径资源的时候使用的。
（3） 重写webview的WebViewClient ，在onPageFinished方法中启动图片异步加载方法：
在task的doInBackground中下载图片并保存到sd卡指定位置，下载完一个就通知publishProgress(urlStr) urlStr是图片网址。
在task的onProgressUpdate方法中加载替换img属性的js：

@Override
protected void onProgressUpdate(String...values) {
super.onProgressUpdate(values);

mNewsInfoWebview
.loadUrl("javascript:(function(){"
+"var contener =document.getElementsByTagName(\"article\");"
+"var objs;"
+"for(var i=0;i<contener.length;i++){ varobjs=contener[i].getElementsByTagName(\"img\")}"
+ "for(var i=0;i<objs.length;i++)  "
+ "{"
+ "    var imgSrc =objs[i].getAttribute(\"src_link\"); "
+ "    var imgOriSrc =objs[i].getAttribute(\"ori_link\"); "
+ " if(imgOriSrc == \"" + values[0] + "\"){"
+ "   objs[i].setAttribute(\"src\",imgSrc);}"
+ "}" + "})()");
}

Values是publishProgress传入的url

但是这种方式有个问题：当用户sd卡不存在或者用户存储设备非标准时，图片无法显示。
为了解决这个问题，有一下两个方案：
（一） 使用多级缓存：mem+？+sd ？可以使数据库，可以使非sd卡之外存储位置（暂时未进行了解）
（二） 直接使用webview自带缓存：
（1） 修改webview缓存模式：webview.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
（2） 在获取服务器端html时对img进行以下处理：

e.attr("src", "file:///android_asset/news_info_default_image.png");
e.attr("onerror","this.src='file:///android_asset/news_info_default_image.png'");
e.attr("ori_link", imgUrl);

onerror方法是当图片加载不出来时，浏览器默认显示图片
启动后台异步加载图片方法不再写文件，而是直接调用js方法进行url替换：

@Override
protected voidonProgressUpdate(String... values) {
super.onProgressUpdate(values);
mNewsInfoWebview
.loadUrl("javascript:(function(){"
+ "var objs = document.getElementsByTagName(\"img\");"
+ "for(var i=0;i<objs.length;i++)  "
+ "{"
+ "    var imgOriSrc =objs[i].getAttribute(\"ori_link\"); "
+ " if(imgOriSrc == \"" + values[0] + "\"){"
+ "    objs[i].setAttribute(\"src\",imgOriSrc);}"
+ "}" + "})()");
}

总结：由于每次加载页面都是通过loadDataWithBaseURL方法，所以即使服务器端页面有进行修改，也不会由于浏览器缓存造成不能更新的问题。但是更新频繁就会造成缓存文件过多，因此需要增加机制清理缓存。