码迷,mamicode.com
首页 > Web开发 > 详细

WebView中实现延迟加载,图片点击时才加载。

时间:2015-02-28 06:39:58      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:

 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中实现延迟加载,图片点击时才加载。

标签:

原文地址:http://www.cnblogs.com/zhengxt/p/4304625.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!