WebView 中網(wǎng)頁圖片的懶加載

也許你看到這個(gè)標(biāo)題第一個(gè)想法就是从隆,這不是 h5 同事去做的事嗎,直接給個(gè) url 地址寿烟,我們直接加載就行了辛燥。但是這個(gè)是根據(jù)業(yè)務(wù)情況來的,很多情況下加載的是 html 的代碼片段徘六,而不是 url地址榴都。
在我們項(xiàng)目中,很多情況是課程的介紹還有文章的詳情都是加載的Html 片段竿音。在后臺(tái)管理系統(tǒng)編輯的時(shí)候通過通用的插件使其插入圖片及其他元素阳惹,存在數(shù)據(jù)庫里的時(shí)候就是其里面的一個(gè)字段莹汤。展示如下圖:

image.png
因?yàn)槲覀儤I(yè)務(wù)頁面大多數(shù)都是放的圖片颠印,如果圖片過多或者過得大,用戶體驗(yàn)的話很差止潮,必須等著全部加載完才能展示钞楼。用戶網(wǎng)絡(luò)不好的話需要等很長時(shí)間。所以需要進(jìn)行優(yōu)化燃乍。
優(yōu)化開啟
因?yàn)槭莾蓚€(gè)安卓跟 IOS 端都要優(yōu)化,IOS 同事仿微信圖片懶加載先做的差不多了逗旁,我這邊又在其基礎(chǔ)上做了些優(yōu)化舆瘪。安卓的話搜的資料倒不是很多,好在跟 IOS 都異曲同工吧算是淀衣。
先說一下實(shí)現(xiàn)思路吧:
本地加載基于 jquery的懶加載的 js 文件召调,加載進(jìn)行展示
相關(guān)文件如下:
下載地址:https://github.com/xinghedazhan/lazyload/tree/master
image.png
1.配置 js 文件
將兩個(gè) js 文件放在項(xiàng)目目錄的assets目錄下
因?yàn)榧虞dHtml 的代碼片段是自己添加網(wǎng)頁的頭跟尾的某残,所以在頭里面添加兩個(gè) js 文件的引用。

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

2.添加 js方法調(diào)用

 "<script type='text/javascript'>" +
                "jQuery(document).ready(" +
                "function(){" +
                "$(\"img\").lazyload({" +
                "placeholder : 'data:image/gif;base64,R0lGODlh/AF9AbMAAP///+7u7t3d3czMzLu7u6qqqpmZmYiIiHd3d2ZmZv4BAgAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAKACwAAAAA/AF9AQAE/xDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7/AAMKHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIP9DihxJsqTJkyhTqlzJsqXLlzBjypxJs6bNmzhz6tzJs6fPn0CDCh1KtKjRo0iTKl3KtKnTp1CjSp1KtarVq1izat3KtavXr2DDih1LtqzZs2jTql3Ltq3bt3Djyp1Lt67du3jz6t3Lt6/fv4ADCx5MuLDhw4gTK17MuLHjx5AjS55MubLly5gza97MubPnz6CRBhhAekCAAKHjBCiA4MABAwUICDid2k2BBLgRtDYwQEDtNgEQ4B6eALbv32sECB/OG7mb4MMPoHbuZnlx6m9u4y6A/Tnz7rYT6J4Ofo1uBNzLrwmu+7j6NATOv18T//UJ8vOfsEZvgnZ+KAW4ZkD/f/7910R96ZFwGn4GKjGAawcQyGCDSAQAoXsiLEhhExASoGAAs23IBAGvGTBhBwLMdqKIRFhogAEehgBiiiyO+CKMIMwYYo1LFHBjjByMliKGPFZ4Y2wcCEAajUUysRpsBRRgmgUgltZbk04EQACUURJgJQFglkYklksMEGVssYGpZmkrkukgAWmqGeaYbj4x45Jt1qnnnnz26eefgAYq6KCEFmoonwXqoKEEix5aQQAv5inDiwNMQKmjVEbKw6UScIrpBJCauGlzjEpKaKimwuDppxegGqScGIwGK5UDgOmbp6RNp6RvAqg5oayyAZBrka5qsOWNqwJwLLIGYCgA/7PHVtopqVuCyayzzPpIao3FYnCsl8u6N8CLXpp5I6gvSjnujdICwOmy4J7LaLqkIdsui91a8Gyz6L5o6bbKagqAj0CGuu27L7p37HQE9wuwiPlWsGWCEuyr673CahoqtgdT6+8EFgOwMQX7YrxhxBQk6+7Dp9WqLWr7WuApwkCKrGnMFahMIcr/mowrszeitq7MHUtbLQWuDp3zwycLfIHKCP9orahKp1y0BEf3K/THVpu8s9NE12wzv6FOKcG6MIO9crs0I30z2GUTqzYFx1agdNVYa7xqyT3nXXOx5FKwrtcN8lxxuv3GuK64QefNr8jasu3x3wJHe/iqiTYqcv+qmRkMtMfkaivq2LAty6nBsdnbd8CUj+45s+3i7anhnb0O+wTr/ojfvj+uDCTvkc48uduji7xsAXGfzfXaWju34POai8xmq9NvzqCS0mZOXvSJljpdwqBq/yjnrH4AKfLEk18+DKGiDzls6wNhOrLqxw9D7uTWb38M0e/v//8ADKAAB0jAAhrwgAhMoAIXyMAGOvCBEIygBCdIwQpa8IIYzKAGN8jBDnrwgyAMoQhHSMISmvCEKEyhClfIwha68IUwjKEMZ0jDGtrwhjjMoQ53yMMe+vCHQAyiEIdIxCIa8YhITKISl8jEJjrxiVCMohSnSMUqWvGKWMyiFrfIxS5OevGLYAyjGMdIxjKa8YxoTKMa18jGNrrxjXCMoxznSMc62vGOeMyjHvfIxz768Y+ADKQgB0nIQhrykIhMpCIXychGOvKRkIykJCepkAgAACH5BAUKAAoALO0AngAdAB4AAAS6UMlJJSHmXFG7n0koJogWfKgyjqUxpNKhINRhHyJiEO93IjREgVMJGHQEAbFzAOpggUFg6mkCC7AsoanJZrle7S0MuxHIqdsJ7RkcMuyP24CNUwASw84+AeAxe3wKfgADemeChAJ6BomECoxrdo8FdD1xhHgDBZx4cVOZnHWfAZ4Km5yXYVOlFAQFG2SskhOvF6o+AqwfF70CphQBSrq0Hr2+wwPDSsUeAscD0dLLaAIDPNLRzHxT2zARACH5BAUKAAoALO0AnwAdAB0AAAS1UMk5yUEYp40K/SCBXBmiIFvqgZ9xXLAhG2iaIAErue9BsIKCDcfiHVY6ySFFpLhcv6STc2jJpMWbTwEAzKLYz/JgkAxmYVYgYSAIFIVrmkUYCN6G+DwZCAThe1gFBWCBIYOGSQOIiUCEjTqEhZASBJaUH5aTlAKakF1dlZYDiaChCp2Wb3umpwoDo6ytrQOkdmmzs7W7OgB9Abm6u3Z3v8bAs2q7d8x+xgB7fszFv9Clx9ZJEQAh+QQFCgAKACztAJ4AHgAeAAAEuRDISUEYpBQyRP2gRRhHaSIHQgQhOBgwaaYpghTtFBRxrGk0m40V2vVWHwHBlhiCdjwDIWcxIBJNTyVjKAyok8K1WRn8vuAwNoELa6ZpimFNxGjilcDaIMlw8BUFWAgiBEiAEwJrAkqGiBVrBI1ojxIHWByGlJWXNxh/lZYokpqhEjwFAgGZphICAwEXA7CtAFqzHbVEr7O1FLhavrK0vraMqsXGjES+x8vFy6qx06bT1izMldfZyXgRACH5BAUKAAoALO0AngAeAB0AAAS+UMlJpRiEDBWq/wowFKRhngaoKmRZoOZxEOuUtWSWxYacrjdCYQOSGVU6Wo0lQxw6FUxmaWseKgKdgGpzIpQSHZErKSDOky2GXDkjCpLBZsumoEPycV1yD+T3dhN+A3SACj8KF4SGEikJBoqFgAYJjwECmIwKB5U0mJJ7lQkEAJ8AhgOiHZ9QewWVCBKXmXsBonCyAgGtZJRnvLu8VAFOMxXBwksCBWAUyGx+ybLBAKdL0hTV2tvWgNzfjOBcEQAh+QQFCgAKACztAJ4AHgAdAAAEuRDISUEQYgwcqv+SQIxjQRToAIIi6aKwoa7TQNikdseGUXQrDU4ApAQGhV6vWBFuaBaC0sAMCQXQiVRZOWqwWa3hcCBQMM8wJUkGXjDqLrkc4sQrhHkdfJ8IyAgBb3x9EgcIBwOCRIVrCAgEgoKNE2MIP5KUEgaPBhaTmpyQn1V9j6OZlAKPCW6lcQUICQhdjQGyCQWaFAYJvq99Bb65uxLCvrS7AQfDgZoBx8iEjYeyzspSdMUXN8ARACH5BAUKAAoALO0AngAeAB4AAAS0EMhJZQgi38q7FUM4ECQ5eB4GisRYkgJKZZlYuy8RyDS4VQFXoaBL9WQS0rCwA6qaSMBgSeBcBNCodGg4TS4/7YRgKBgoYDGncOha0moK2XB+xysCumHHv1f0Xn4cc4GCcgcHVYYVZgcFi4yIhZCIB5OGApUxkEkHCAecFp6OoQAGnwhZhgQIrYqQBa2fnAGnsqpxUwkICbu4MgGVB73EvmoYrMXFj8cgbLzECEyCGFNERTIRACH5BAUKAAoALO4AngAdAB4AAASrEMhJQbi46i2x+N8gChzngaE4lhR2Ca+gzqzlboE8EDyb1TseoRSoUQTCodGI5JGWQCHUKBxMWbuC8ooreIvcjbfwDFcIXqv57N2uJQSD9k2JG9R0gGFffgf2BmB0dgZ5FoBuawUGBwctZgSNB245MoVLkY2XFFkIB4Jdkp8aAZEICQkGfRJInp6jOAanqKgHgAi4B7mgGwSztKinuLiJRLLAtMS8S017TjURACH5BAUKAAoALO0AngAeAB4AAAS2EMhJa6g4axC671s4fZ1gXmJGBmYrpDDrwrA5DC8tBveti4Je7qcJ+oibG2GIrAgIhEFTBSWgppQqEwsYQAVXrjcK4nahA5lZG6hyCYVloFA4bHVz+sVwQBimA3QEEgMICAlhOnQFUhyHCQdIcAYFWQmXfzqTjBWPCZUwBAajoBQCngeJFqKjBqqOlwkIBXdtraOvEgGehn4FlAfBwbgpBbG9CH3CwYM0AQbIycnMuUBQlFF3FREAIfkEBQoACgAs7QCeAB4AHgAABLwQyEmrvTjrzWfoYCCKIDeSpXZ+FpuKAuq5r2DTQ5x6tjAJhAEt1WMRCgTfThLoAQIGw0G5BAyu1gMCUZ1chYTtoSsRXKGIxJhszhkSajKgDYSvu2ZCgABPyAlBNn1UO3uAEmkJBXiABBIFfUMgjUoBfQZLA40UkAkIiyWagIQAW1ugHANIhxUBpggGkhVHBUiyrmIISS2qtbYZAVoIB8QHSEhRUbV6HGHFxcnKBgMle88H0QXUVQFXtWcbEQAh+QQFCgAKACztAJ8AHgAdAAAEuhDIOUOgOGsqhtjgFhDEcIWoFBhGYaZocMwGAaMHots3WCRAQ6+CCQATh6HKcgL8gM0hc4IIKitTI3BwxV4Ix+5EYAGAkWKVgGywpgNrmVsMJ4MRwvTaXkWkAXtwOghRUgMeEoM8Vx2ITjoHhTeHLwABCDkFjJQUBJgHizACJY4TMzOhIaMDJRkypwWSGKwkXBqvBywEH0W0JKlFLLksNb8EBcbAGgTELAXPz8ckvDfMzi3QrV1wtHEoEQA7'," +  /* 占位圖 */
                "threshold : 50," +  /* 距離圖片多少的位置處開始下載 */
                "failure_limit : 10," +  /* 最大不在加載范圍圖片數(shù), 主要是瀑布流布局時(shí)設(shè)置 */
                "effect: \"fadeIn\"," + /* 圖片加載方式 */
                "skip_invisible : true" +
                "});" +
                "});" +
                "</script>" +

看方法的含義應(yīng)該是網(wǎng)頁框架加載完畢的時(shí)候再進(jìn)行的圖片的懶加載环础。placeholder代表的是占位圖剩拢,就是我放的是holder.gif的二進(jìn)制字符串,當(dāng)時(shí)以為時(shí)間緊還有文件也不大贯钩,直接就用的二進(jìn)制了办素。有想法的可以放本地加載引用試試。
3.替換 img標(biāo)簽的 src 屬性
因?yàn)閖query的懶加載框架的加載不是用普通的 src 屬性來加載的勺三,需要替換成data-original需曾,同時(shí)還要考慮 Video 跟 Audio 等標(biāo)簽里面的 src 屬性不能替換祈远,故寫了個(gè)匹配替換方法如下:

    /**
     * 變img標(biāo)簽里面的 src 屬性為  data-original
     */
    public static String takeImgSrc(String htmlStr) {
        String line=htmlStr;
        String itemStr="";
        String pattern = "<img.*?>";
        // 創(chuàng)建 Pattern 對象
        Pattern r = Pattern.compile(pattern);
        // 現(xiàn)在創(chuàng)建 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;
    }

至此應(yīng)該可以實(shí)現(xiàn)仿微信的 lazyload 了绊含。不足的地方歡迎大家指正炊汹,共同進(jìn)步

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市充甚,隨后出現(xiàn)的幾起案子霸褒,更是在濱河造成了極大的恐慌,老刑警劉巖技矮,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件殊轴,死亡現(xiàn)場離奇詭異,居然都是意外死亡樊零,警方通過查閱死者的電腦和手機(jī)孽文,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進(jìn)店門芋哭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人减牺,你說我怎么就攤上這事“哐唬” “怎么了草雕?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵墩虹,是天一觀的道長。 經(jīng)常有香客問我诫钓,道長,這世上最難降的妖魔是什么问拘? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任惧所,我火速辦了婚禮下愈,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘势似。我一直安慰自己,他們只是感情好障簿,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布栅迄。 她就那樣靜靜地躺著,像睡著了一般世蔗。 火紅的嫁衣襯著肌膚如雪朗兵。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天寸爆,我揣著相機(jī)與錄音盐欺,去河邊找鬼。 笑死魔种,一個(gè)胖子當(dāng)著我的面吹牛粉洼,可吹牛的內(nèi)容都是我干的叶摄。 我是一名探鬼主播安拟,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼糠赦,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了拙泽?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤艾岂,失蹤者是張志新(化名)和其女友劉穎王浴,沒想到半個(gè)月后梅猿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡钞啸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年喇潘,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片絮吵。...
    茶點(diǎn)故事閱讀 38,117評論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蹬敲,死狀恐怖莺戒,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情从铲,我是刑警寧澤,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布渣淤,位于F島的核電站吉嫩,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏用踩。R本人自食惡果不足惜忙迁,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望惠奸。 院中可真熱鬧恰梢,春花似錦、人聲如沸嵌言。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽娃豹。三九已至购裙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間缓窜,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工私股, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留恩掷,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓峭状,卻偏偏與公主長得像,于是被迫代替她去往敵國和親劝赔。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,877評論 2 345

推薦閱讀更多精彩內(nèi)容

  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體仍翰。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 3,828評論 0 0
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對...
    cosWriter閱讀 11,089評論 1 32
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5予借? 答:HTML5是最新的HTML標(biāo)準(zhǔn)频蛔。 注意:講述HT...
    kismetajun閱讀 27,423評論 1 45
  • 特別聲明:此篇文章內(nèi)容來源于@Jeremy Wagner的《Lazy Loading Images and Vid...
    Naeco閱讀 30,659評論 0 32
  • 什么是懶加載 懶加載其實(shí)就是延遲加載尼变,是一種對網(wǎng)頁性能優(yōu)化的方式,比如當(dāng)訪問一個(gè)頁面的時(shí)候哀澈,優(yōu)先顯示可視區(qū)域的圖片...
    我向你奔閱讀 2,630評論 0 4