利用jsoup实现WebView使用默认图片替换img、无图模式等功能

先说下大致实现的功能。使用weibview加载新闻详情，在文字内容加载完成之前使用本地的默认图片替代真实图片，加载完成后再将真实图片替换上去。目的是为了在网速不这么快的时候，不会出现只出现文字然后闪的一下图片一个个出来，影响体验。
需要使用到的第三方工具：jsoup

compile 'org.jsoup:jsoup:1.10.3'   

混淆：

-keep public class org.jsoup.** {    public *;}   

大致思路：在获取到新闻的内容body数据，使用jsoup获取到img标签，将src的值暂时存储到其他属性中，如alt。把本地图片的路径赋给src，这样直接加载body数据的话就可以显示本地图片了。然后在onPageFinished方法中利用js代码将真实的图片地址替换回src，并添加点击事件。
这里使用知乎日报的api来做示例，上代码：

设置mWebView

WebSettings webSettings = mWebView.getSettings();webSettings.setJavaScriptEnabled(true);webSettings.setDefaultTextEncodingName("UTF-8");//先阻塞加载图片webSettings.setBlockNetworkImage(false);//为了演示，不缓存webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);// 添加js交互接口类，并起别名 imagelistnermWebView.addJavascriptInterface(new JSInterface(this), "imagelistner");mWebView.setWebViewClient(new MyWebViewClient());

WebViewClient

private class MyWebViewClient extends WebViewClient {    //调用外部浏览器打开超链接    @Override    public boolean shouldOverrideUrlLoading(WebView view, String url) {        return true;    }    @Override    public void onPageFinished(WebView view, String url) {        WebSettings webSettings = view.getSettings();        webSettings.setJavaScriptEnabled(true);        webSettings.setBlockNetworkImage(false);        //判断webview是否加载了，图片资源        if (!webSettings.getLoadsImagesAutomatically()) {            //设置wenView加载图片资源            webSettings.setLoadsImagesAutomatically(true);        }        super.onPageFinished(view, url);        // html加载完成之后，添加监听图片的点击js函数        addImageClickListner();    }    @Override    public void onPageStarted(WebView view, String url, Bitmap favicon) {        view.getSettings().setJavaScriptEnabled(true);        super.onPageStarted(view, url, favicon);    }}

注入js函数监听

private void addImageClickListner() {    //模拟网络卡顿    new Handler().postDelayed(new Runnable() {        @Override        public void run() {            //网页内容加载完成之后，将真实图片的值替换回src            mWebView.loadUrl("javascript:(function(){" +                    "var objs = document.getElementsByTagName(\"img\"); " +                    "         window.imagelistner.log(objs.length);" +                    "for(var i=0;i<objs.length;i++)  " +                    "{"                    + "     if(objs[i].src.indexOf(\"loading_image_default.png\")<0) {"                    + "     } else {"                    + "         objs[i].src = objs[i].alt;"                    + "     }" +                    "}" +                    "})()");            // 这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，函数的功能是在图片点击的时候调用本地java接口并传递url过去            mWebView.loadUrl("javascript:(function(){" +                    "var objs = document.getElementsByTagName(\"img\"); " +                    "for(var i=0;i<objs.length;i++)  " +                    "{"                    + "    objs[i].onclick=function()  " +                    "    {  "                    + "        window.imagelistner.openImage(this.src);  " +                    "    }  " +                    "}" +                    "})()");        }    }, 3000);}

js通信接口

public class JSInterface {    private Context context;    public JSInterface(Context context) {        this.context = context;    }    @JavascriptInterface    public void openImage(String img) {        //点击跳转查看图片    }    //调试用的，可以删掉    @JavascriptInterface    public void log(String log) {        Timber.d("log: %s", log);    }}

最后就是请求到数据，加载了

mWebView.loadDataWithBaseURL("file:///android_asset/",                                HtmlUtil.getNewContent(newsDetailBean.getBody()),                                "text/html; charset=UTF-8", null, null);

HtmlUtil

public static String getNewContent(String htmltext) {    //jsoup解析body数据    Document doc = Jsoup.parse(htmltext);    Elements elements = doc.getElementsByTag("img");    for (Element element : elements) {        //没有加载css，所以会出现图片很大导致可以左右滑动。这里将所有图片的宽度设为100%，解决这个问题        element.attr("width", "100%").attr("height", "auto");        //将src的地址放入alt，可以替换成其他的属性        //但是注意不能放到自定义的如_src中，会导致js代码中this._src取到undefine        //我不懂js，所以只能放在原有的属性中        element.attr("alt", element.attr("src"));        //将src的值替换为assets文件夹下loading_image_default.png        element.attr("src", "loading_image_default.png");    }    return doc.toString();}

所有代码都在上面了，注释也写的很清晰，请求接口和布局文件的代码我就不贴了，利用这个方法也可以实现浏览器的无图模式。
效果图：

最后贴上默认图片：