WebView 中网页图片的懒加载

也许你看到这个标题第一个想法就是,这不是 h5 同事去做的事吗,直接给个 url 地址,我们直接加载就行了。但是这个是根据业务情况来的,很多情况下加载的是 html 的代码片段,而不是 url地址。
在我们项目中,很多情况是课程的介绍还有文章的详情都是加载的Html 片段。在后台管理系统编辑的时候通过通用的插件使其插入图片及其他元素,存在数据库里的时候就是其里面的一个字段。展示如下图:

image.png
因为我们业务页面大多数都是放的图片,如果图片过多或者过得大,用户体验的话很差,必须等着全部加载完才能展示。用户网络不好的话需要等很长时间。所以需要进行优化。
优化开启
因为是两个安卓跟 IOS 端都要优化,IOS 同事仿微信图片懒加载先做的差不多了,我这边又在其基础上做了些优化。安卓的话搜的资料倒不是很多,好在跟 IOS 都异曲同工吧算是。
先说一下实现思路吧:
本地加载基于 jquery的懒加载的 js 文件,加载进行展示
相关文件如下:
下载地址:https://github.com/xinghedazhan/lazyload/tree/master
image.png
1.配置 js 文件
将两个 js 文件放在项目目录的assets目录下
因为加载Html 的代码片段是自己添加网页的头跟尾的,所以在头里面添加两个 js 文件的引用。

 " <script src='file:///android_asset/jquery.min.js'></script>" 
 " <script src='file:///android_asset/jquery.lazyload.js'></script>" 

2.添加 js方法调用

 "<script type='text/javascript'>" +
                "jQuery(document).ready(" +
                "function(){" +
                "$(\"img\").lazyload({" +
                "placeholder : 'data:image/gif;base64,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'," +  /* 占位图 */
                "threshold : 50," +  /* 距离图片多少的位置处开始下载 */
                "failure_limit : 10," +  /* 最大不在加载范围图片数, 主要是瀑布流布局时设置 */
                "effect: \"fadeIn\"," + /* 图片加载方式 */
                "skip_invisible : true" +
                "});" +
                "});" +
                "</script>" +

看方法的含义应该是网页框架加载完毕的时候再进行的图片的懒加载。placeholder代表的是占位图,就是我放的是holder.gif的二进制字符串,当时以为时间紧还有文件也不大,直接就用的二进制了。有想法的可以放本地加载引用试试。
3.替换 img标签的 src 属性
因为jquery的懒加载框架的加载不是用普通的 src 属性来加载的,需要替换成data-original,同时还要考虑 Video 跟 Audio 等标签里面的 src 属性不能替换,故写了个匹配替换方法如下:

    /**
     * 变img标签里面的 src 属性为  data-original
     */
    public static String takeImgSrc(String htmlStr) {
        String line=htmlStr;
        String itemStr="";
        String pattern = "<img.*?>";
        // 创建 Pattern 对象
        Pattern r = Pattern.compile(pattern);
        // 现在创建 matcher 对象
        Matcher m = r.matcher(line);
        while (m.find()){
            if (m.group(0)!=null){
                if (m.group(0).contains("src")){
                    itemStr = m.group(0).replace("src","data-original");
                    line = line.replace(m.group(0), itemStr);
                }
            }
        }
        return line;
    }

至此应该可以实现仿微信的 lazyload 了。不足的地方欢迎大家指正,共同进步

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,828评论 0 0
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,089评论 1 32
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,423评论 1 45
  • 特别声明:此篇文章内容来源于@Jeremy Wagner的《Lazy Loading Images and Vid...
    Naeco阅读 30,659评论 0 32
  • 什么是懒加载 懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片...
    我向你奔阅读 2,630评论 0 4