2. 程式人生 > >淺談圖片載入的三級快取（一）

淺談圖片載入的三級快取（一）

阿新 • • 發佈：2019-02-01

之前被人問及過，圖片的三級快取是什麼啊，來給我講講，圖片三級快取，好高大尚的名字，聽著挺厲害，應該是很厲害的技術，當時不會啊，也就沒什麼了，沒有說出來唄，前一階端用到了BitmapUtils的圖片快取框架，索性就自己找些知識點來研究一些圖片的三級快取是什麼吧。真所謂是知識你要是不知道，那就真的說不出所以然來，但是當你真正的去了解了，三級快取也不是那麼高階的技術。好了，閒話不多說了，開始圖片的三級快取原理吧。

什麼是圖片的三級快取

  • 1、記憶體快取 優先載入，速度最快
  • 2、本地快取 次優先載入 速度稍快
  • 3、網路快取 最後載入 速度由網路速度決定（浪費流量）

圖片的三級快取圖形解釋

這裡寫圖片描述

好了，既然知道了什麼三級快取的字面意思了，那麼我們就來處理吧。

圖片快取—記憶體快取的原理

MemoryCacheUtils.java:

package com.example.bitmaputils.bitmap;

import android.graphics.Bitmap;
import android.util.Log;
import android.util.LruCache;

/**
 * 記憶體快取
 */
public class MemoryCacheUtils {

    /**
     * LinkedHashMap<>(10,0.75f,true);
     * <p/>
     * 10是最大致   0.75f是載入因子   true是訪問排序   false插入排序
     *
     *
     */
 

    //private LinkedHashMap<String,Bitmap> mMemoryCache = new LinkedHashMap<>(5,0.75f,true);

    private LruCache<String, Bitmap> mLruCache;


    public MemoryCacheUtils() {
        long maxMemory = Runtime.getRuntime().maxMemory();//最大記憶體  預設是16兆  執行時候的
        mLruCache = new LruCache<String, Bitmap>((int
 
) (maxMemory / 8)) {
            @Override
            protected int sizeOf(String key, Bitmap value) {
                //int byteCount = value.getByteCount();
                //得到圖片位元組數
                // @return number of bytes between rows of the native bitmap pixels.
                int byteCount = value.getRowBytes() * value.getWidth();
                return byteCount;
            }
        };
    }

    /**
     * 從記憶體中讀取
     *
     * @param url
     */
    public Bitmap getFromMemroy(String url) {

        Log.d("MyBitmapUtils", "從記憶體中載入圖片");
        return mLruCache.get(url);
    }

    /**
     * 寫入到記憶體中
     *
     * @param url
     * @param bitmap
     */
    public void setToMemory(String url, Bitmap bitmap) {
        mLruCache.put(url, bitmap);
    }
}

很簡單吧，在這裡我們使用了LruCache（），對圖片進行了記憶體快取，這裡我們只是稍微進行了處理，在這裡我們只是介紹原理，當然了哈，效能，OOM溢位問題我們在這裡不作處理。

圖片快取—本地快取

package com.example.bitmaputils.bitmap;


import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Environment;
import android.util.Log;

import com.example.bitmaputils.MD5Encoder;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;

/**
 * 本地快取
 */
public class SDcardCacheUtils {

    /**
     * 我們讀取記憶體的絕對路徑
     */
    public static final String CACHE_PATH = Environment
            .getExternalStorageDirectory().getAbsolutePath() + "/aixuexi";

    /**
     * 從本地讀取
     * @param url
     */
    public Bitmap getFromSd(String url){
        String fileName = null;
        try {
            //得到圖片的url的md5的檔名
            fileName = MD5Encoder.encode(url);
        } catch (Exception e) {
            e.printStackTrace();
        }
        File file = new File(CACHE_PATH,fileName);

        //如果存在，就通過bitmap工廠，返回的bitmap，然後返回bitmap
        if (file.exists()){
            try {
                Bitmap bitmap = BitmapFactory.decodeStream(new FileInputStream(file));
                Log.d("MyBitmapUtils", "從本地讀取圖片啊");
                return bitmap;
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            }
        }
        return null;
    }

    /**
     * 向本地快取
     *
     * @param url   圖片地址
     * @param bitmap   圖片
     */
    public void savaSd(String url,Bitmap bitmap){
        String fileName = null;
        try {
            //我們對圖片的地址進行MD5加密，作為檔名
            fileName = MD5Encoder.encode(url);
        } catch (Exception e) {
            e.printStackTrace();
        }

        /**
         * 以CACHE_PATH為資料夾  fileName為檔名
         */
        File file = new File(CACHE_PATH,fileName);

        //我們首先得到他的符文劍
        File parentFile = file.getParentFile();
        //檢視是否存在，如果不存在就建立
        if (!parentFile.exists()){
            parentFile.mkdirs(); //建立資料夾
        }

        try {
            //將圖片儲存到本地
            /**
             * @param format   The format of the compressed image   圖片的儲存格式
             * @param quality  Hint to the compressor, 0-100. 0 meaning compress for
             *                 small size, 100 meaning compress for max quality. Some
             *                 formats, like PNG which is lossless, will ignore the
             *                 quality setting
             *                 圖片的儲存的質量    100最好
             * @param stream   The outputstream to write the compressed data.
             */
            bitmap.compress(Bitmap.CompressFormat.JPEG,100,new FileOutputStream(file));
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
    }
}

圖片快取—網路快取

NetCacheUtils .java:

package com.example.bitmaputils.bitmap;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.util.Log;
import android.widget.ImageView;

import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;

/**
 * 網路快取工具類
 */
public class NetCacheUtils {


    /**
     * 圖片
     */
    private ImageView mImageView;

    /**
     * 圖片地址
     */
    private String mUrl;

    /**
     * 本地快取
     */
    private SDcardCacheUtils mDcardCacheUtils;


    /**
     * 記憶體快取
     */
    private MemoryCacheUtils mMemoryCacheUtils;


    public NetCacheUtils(SDcardCacheUtils dcardCacheUtils, MemoryCacheUtils memoryCacheUtils) {
        mDcardCacheUtils = dcardCacheUtils;
        mMemoryCacheUtils = memoryCacheUtils;
    }

    /**
     * 從網路中下載圖片
     *
     * @param image
     * @param url
     */
    public void getDataFromNet(ImageView image, String url) {
        new MyAsyncTask().execute(image, url);  //啟動Asynctask，傳入的引數到對應doInBackground（）
    }


    /**
     * 非同步下載
     * <p/>
     * 第一個泛型 ： 引數型別  對應doInBackground（）
     * 第二個泛型 ： 更新進度   對應onProgressUpdate（）
     * 第三個泛型 ： 返回結果result   對應onPostExecute
     */
    class MyAsyncTask extends AsyncTask<Object, Void, Bitmap> {

        /**
         * 後臺下載  子執行緒
         *
         * @param params
         * @return
         */
        @Override
        protected Bitmap doInBackground(Object... params) {

            //拿到傳入的image
            mImageView = (ImageView) params[0];

            //得到圖片的地址
            mUrl = (String) params[1];
            //將imageview和url繫結，防止錯亂
            mImageView.setTag(mUrl);

            Bitmap bitmap = downLoadBitmap(mUrl);

            return bitmap;
        }


        /**
         * 進度更新   UI執行緒
         *
         * @param values
         */
        @Override
        protected void onProgressUpdate(Void... values) {
            super.onProgressUpdate(values);
        }

        /**
         * 回撥結果，耗時方法結束後，主執行緒
         *
         * @param bitmap
         */
        @Override
        protected void onPostExecute(Bitmap bitmap) {
            if (bitmap != null) {
                //得到圖片的tag值
                String url = (String) mImageView.getTag();
                //確保圖片設定給了正確的image
                if (url.equals(mUrl)) {
                    mImageView.setImageBitmap(bitmap);

                    /**
                     * 當從網路上下載好之後儲存到sdcard中
                     */
                    mDcardCacheUtils.savaSd(mUrl, bitmap);

                    /**
                     *  寫入到記憶體中
                     */
                    mMemoryCacheUtils.setToMemory(mUrl, bitmap);
                    Log.d("MyBitmapUtils", "我是從網路快取中讀取的圖片啊");
                }
            }
        }
    }

    /**
     * 下載圖片
     *
     * @param url 下載圖片地址
     * @return
     */
    private Bitmap downLoadBitmap(String url) {

        //連線
        HttpURLConnection conn = null;
        try {
            conn = (HttpURLConnection) new URL(url)
                    .openConnection();

            //設定讀取超時
            conn.setReadTimeout(5000);
            //設定請求方法
            conn.setRequestMethod("GET");
            //設定連線超時連線
            conn.setConnectTimeout(5000);
            //連線
            conn.connect();

            //響應碼
            int code = conn.getResponseCode();

            if (code == 200) {  //請求正確的響應碼是200
                //得到響應流
                InputStream inputStream = conn.getInputStream();
                //得到bitmap物件
                Bitmap bitmap = BitmapFactory.decodeStream(inputStream);

                return bitmap;
            }
        } catch (IOException e) {
 #
          e.printStackTrace();
        } finally {
            conn.disconnect();
        }

        return null;
    }
}

好了，至此，一個簡單的圖片的三級快取完成了，接下來看看使用吧。

圖片載入工具類

MyBitmapUtils .java:

package com.example.bitmaputils.bitmap;

/**
 * Created by 若蘭 on 2016/1/29.
 * 一個懂得了程式設計樂趣的小白，希望自己
 * 能夠在這個道路上走的很遠，也希望自己學習到的
 * 知識可以幫助更多的人,分享就是學習的一種樂趣
 * QQ:1069584784
 * csdn:http://blog.csdn.net/wuyinlei
 */

import android.graphics.Bitmap;
import android.widget.ImageView;

/**
 * 自定義的bitmap工具類
 */
public class MyBitmapUtils {


    /**
     * 網路快取
     */
    public NetCacheUtils mNetCacheUtils;

    /**
     * 本地快取
     */
    public SDcardCacheUtils mSdCacheUtils;

    /**
     * 記憶體快取
     */
    public MemoryCacheUtils mMemoryCacheUtils;


    public MyBitmapUtils() {
        mSdCacheUtils = new SDcardCacheUtils();
        mMemoryCacheUtils = new MemoryCacheUtils();
        mNetCacheUtils = new NetCacheUtils(mSdCacheUtils, mMemoryCacheUtils);
    }

    /**
     * 展示圖片的方法
     *
     * @param image
     * @param url
     */
    public void display(ImageView image, String url) {


        //從記憶體中讀取
        Bitmap fromMemroy = mMemoryCacheUtils.getFromMemroy(url);
        //如果記憶體中有的h話就直接返回，從記憶體中讀取
        if (fromMemroy != null) {
            image.setImageBitmap(fromMemroy);

            return;
        }


        //從本地SD卡讀取
        Bitmap fromSd = mSdCacheUtils.getFromSd(url);
        if (fromSd != null) {
            image.setImageBitmap(fromSd);

            mMemoryCacheUtils.setToMemory(url, fromSd);

            return;
        }
        //從網路中讀取
        mNetCacheUtils.getDataFromNet(image, url);

    }
}

使用這個工具類就很簡單了
只需在載入資料的介面卡中

//宣告圖片載入工具類
private MyBitmapUtils utils;
        public PhotoAdapter() {
            //mBitmapUtils = new BitmapUtils(MainActivity.this);
           // mBitmapUtils.configDefaultLoadingImage(R.mipmap.defaut);
            utils = new MyBitmapUtils();
        }

然後在getView()方法中，使用工具類中的display()方法就可以了。簡單吧
utils.display(holder.tvImage,mImageViews[position]);

在這裡我們看下圖片載入效果：
這裡寫圖片描述

來看下LOGCAT日誌：

01-29 11:19:48.127 5556-5556/com.example.bitmaputils D/MyBitmapUtils: 從本地讀取圖片啊
01-29 11:19:48.395 5556-5556/com.example.bitmaputils D/MyBitmapUtils: 從本地讀取圖片啊
01-29 11:19:48.687 5556-5556/com.example.bitmaputils D/MyBitmapUtils: 從本地讀取圖片啊
01-29 11:19:49.282 5556-5556/com.example.bitmaputils D/MyBitmapUtils: 從記憶體中載入圖片
01-29 11:19:49.628 5556-5556/com.example.bitmaputils D/MyBitmapUtils: 從本地讀取圖片啊
01-29 11:19:50.173 5556-5556/com.example.bitmaputils D/MyBitmapUtils: 我是從網路快取中讀取的圖片啊
01-29 11:19:58.630 5556-5556/com.example.bitmaputils D/MyBitmapUtils: 從記憶體中載入圖片
01-29 11:19:58.762 5556-5556/com.example.bitmaputils D/MyBitmapUtils: 從本地讀取圖片啊
01-29 11:19:59.325 5556-5556/com.example.bitmaputils D/MyBitmapUtils: 我是從網路快取中讀取的圖片啊
01-29 11:19:59.624 5556-5556/com.example.bitmaputils D/MyBitmapUtils: 從本地讀取圖片啊


01-29 11:56:40.897 15045-15045/com.example.bitmaputils D/MyBitmapUtils: 從本地讀取圖片啊
01-29 11:56:40.923 15045-15045/com.example.bitmaputils D/MyBitmapUtils: 從記憶體中載入圖片
01-29 11:56:41.105 15045-15045/com.example.bitmaputils D/MyBitmapUtils: 從本地讀取圖片啊
01-29 11:56:41.118 15045-15045/com.example.bitmaputils D/MyBitmapUtils: 從記憶體中載入圖片
01-29 11:56:41.268 15045-15045/com.example.bitmaputils D/MyBitmapUtils: 從本地讀取圖片啊
01-29 11:56:41.283 15045-15045/com.example.bitmaputils D/MyBitmapUtils: 從記憶體中載入圖片
01-29 11:56:41.431 15045-15045/com.example.bitmaputils D/MyBitmapUtils: 從本地讀取圖片啊
01-29 11:56:43.837 15045-15045/com.example.bitmaputils D/MyBitmapUtils: 從記憶體中載入圖片
01-29 11:56:44.013 15045-15045/com.example.bitmaputils D/MyBitmapUtils: 從本地讀取圖片啊
01-29 11:56:46.047 15045-15045/com.example.bitmaputils D/MyBitmapUtils: 從記憶體中載入圖片
01-29 11:56:46.222 15045-15045/com.example.bitmaputils D/MyBitmapUtils: 從本地讀取圖片啊

好了，一個簡單的圖片三級快取原理就這樣的誕生了，當然正如開始所說，這裡只是簡單的原理介紹，像裡面用到的AsyncTask非同步載入，和LruCache在這裡只是使用，在以後的篇章中會對這兩個進行介紹的，好了，由於程式碼展示的程式碼量太多，這裡我就不在上傳怎麼顯示圖片的原始碼了，下面我會提供github原始碼地址，可以找到我的這個demo的原始碼。如果有問題，或者獨特的見解，咱們可以討論哦，QQ：1069584784

相關推薦

淺談圖片載入的三級快取（一）

之前被人問及過，圖片的三級快取是什麼啊，來給我講講，圖片三級快取，好高大尚的名字，聽著挺厲害，應該是很厲害的技術，當時不會啊，也就沒什麼了，沒有說出來唄，前一階端用到了BitmapUtils的圖片快取框架，索性就自己找些知識點來研究一些圖片的三級快取是什麼吧。真

淺談PHP面向物件程式設計（一）

傳統的面向過程   將要完成的工作，分作若干個步驟，或再細分為子步驟，然後後步驟從前往後一步一步完成，最初達致目標。 現代的面向物件   將要完成的工作拆分為“一個一個物件”的任務（功能），每個物件獨自完成自己的任務，任務之間的連結通過“呼叫”來實現，最終也完成了整體的工

淺談Android 事件分發機制（一）

get touch 需要 傳遞 cimage android ges 常見 滑動 在上一篇文章中，淺談Android 事件分發機制（一），簡要分析了一下事件分發機制的原理，總結一下就是事件層層傳遞，直到被消費，原理看似簡單，但是在實際使用過程中，場景各不相同，復雜程度也就因

淺談Java併發程式設計系列（一）—— 如何保證執行緒安全

執行緒安全類 保證類執行緒安全的措施： 不共享執行緒間的變數； 設定屬性變數為不可變變數； 每個共享的可變變數都使用一個確定的鎖保護； 保證執行緒安全的思路： 通過架構設計 通過

淺談 SQL 中的鎖（一）餘額問題

這兩天看到資料庫的資料一致性和鎖定的問題：http://bbs.csdn.net/topics/392072953http://bbs.csdn.net/topics/392073296 寫一個帖子專門說說這個。 舉一個使用者餘額的例子，餘額可以是現金、虛擬幣、積分等，可以

ASP.NET之旅--淺談Asp.net執行機制（一）

       很多Asp.net開發人員都有過Asp的背景，以至於我們開發程式的時候總是停留在“頁面”層次思考，也就是說我們常常會只考慮我們現在所做的系統是要完成什麼功能，是要做問卷調查網站還是個人網站，而很少在“請求級”思考，思考能不能通過編碼的方式來操作一個Http請

淺談安卓Xutils框架（一）

xUtils更新到3.0後的基本使用規則說實話，對於xUtils，是我最近才用到的開發框架（也是剛接觸），對於其功能不得不說，簡化了很多的開發步驟，可以說是非常好的開發工具，但是其最近更新到3.0也沒有解決載入自定義ImageView報錯的問題。我總是喜歡用一些最新的東西，x

淺談Winform控制元件開發（一）：使用GDI+美化基礎視窗

 寫在前面： 本系列隨筆將作為我對於winform控制元件開發的心得總結，方便對一些讀者在GDI+、winform等技術方面進行一個入門級的講解，拋磚引玉。 別問為什麼不用WPF，為什麼不用QT。問就是懶，不想學。 本專案所有程式碼均開源在https://github.com/muxiang/

淺談分散式鎖--基於快取（Redis，memcached，tair）實現篇

淺談分散式鎖--基於快取（Redis，memcached，tair）實現篇： 一、Redis分散式鎖 1、Redis實現分散式鎖的原理：     1.利用setnx命令，即只有在某個key不存在情況才能set成功該key，這樣就達到了多個程序併發去set

Android網路圖片載入三級快取

一、概述 網路圖片的載入在Android的開發中是一個必不可少的功能，今天我們就來聊聊網路圖片載入三級快取策略。 所謂的三級快取策略是指通過網路、本地、記憶體三級來快取圖片，減少不必要的網路互動，避免浪費流量。 記憶體快取, 優先載入, 速度最快 本地快

淺談圖片載入：逐行掃描VS交錯掃描

一，前言 最近在不斷地擴充自己web開發的知識面，看得比較泛，難得五一假期就在學習之餘實踐一下，畢竟紙上得來終覺淺，況且“紙上”的不一定都對，之前看了一篇部落格講圖片載入的，博主大概是淘寶前端團隊的吧，講得很透徹，分享一下： 雖然是10年的文章了，但是鑑

Android自制圖片的三級快取（程式碼+講解）

Android的圖片三級快取機制 首先 圖片的三計劃快取的概念 泛指的是 -記憶體快取 -本地快取 -網路快取 記憶體快取的概念： 應用程式在執行時 WindowMeanger會分配給 應用 相應的執行時記憶體 執行是記憶體的大小根據and

圖片載入三級快取，有效解決Could not allocate JNI Env

頭疼了好長時間，終於解決了。推薦大家看這篇部落格，很有用。 http://blog.csdn.net/wuyinlei/article/details/50606455 https://www.jianshu.com/p/2cd59a79ed4a

詳細講解Android的圖片下載框架UniversialImageLoader之磁碟快取（一）

    沉浸在Android的開發世界中有一些年頭的猴子們，估計都能夠深深的體會到Android中的圖片下載、展示、快取一直是心中抹不去的痛。鄙人亦是如此。Ok，閒話不說，為了督促自己的學習，下面就逐一的挖掘Android中還算是比較牛叉的圖片處理框架Universial

A1—淺談JavaScript中的原型（二）

js原型是什麽？想要了解這個問題，我們就必須要知道對象。對象根據w3cschool上的介紹：對象只是帶有屬性和方法的特殊數據類型。我們知道，數組是用來描述數據的。其實呢，對象也是用來描述數據的。只不過有一點點的區別，那就是數組的下標只能是數字。所以，數組最好只用來裝同樣意義的內容。比如說[1,2,3,4,5]

淺談分布式事務（轉）

back 微服務 目的 light ber message values 及其 環境 現今互聯網界，分布式系統和微服務架構盛行。一個簡單操作，在服務端非常可能是由多個服務和數據庫實例協同完成的。在一致性要求較高的場景下，多個獨立操作之間的一致性問題顯得格外棘手。基

淺談我的MongoDB學習（二）

如果 自動 淺談 查詢 技術分享 刪除 insert 工作經歷 posit 　　上一篇簡單講了mongodb的安裝，mongo的windows服務安裝，這樣服務器重啟windows服務會自動重啟mongodb的server，然後我們就可以用客戶端去管理數據了。mongod

淺談自學Python之路（day1）

簡單 程序 odi odin 限制次數 變量類型 第一個程序 構造 welcom 2018-02-19 17:15:14 Python語言相對於其他語言較為簡潔，也相對好入門比如後面不加分號，基本見不著大括號等優點 第一個程序，也是學每門語言都需要掌握的第一個代碼

淺談分詞算法（1）分詞中的基本問題

最短 hub 好的 說明 可能 漢語 等等 http ring [TOC] 前言 分詞或說切詞是自然語言處理中一個經典且基礎的問題，在平時的工作中也反復的接觸到分詞問題，用到了不同的模型，不同的方法應用在各個領域中，所以想對分詞問題做一個系統的梳理。大多數分詞問題主要是針對

再和“面向對象”談戀愛 - 對象簡介（一）

bstr () type === 。。 bool 擔心 fun 對象 JavaScript中的面向對象是個老生常談的話題，但是依然有很多小夥伴處於懵逼的狀態。面試時候最擔心的就是被問到面向對象相關的內容，自己看過無數的資料，依然對面向對象百思不得其解。到底什麽是原型？什麽是