图片下载本地缓存时间戳显示图片方法

来源：http://ask.dcloud.net.cn/article/511

源码下载 

参考文章
http://ask.dcloud.net.cn/article/256
http://ask.dcloud.net.cn/article/397

说明:为了方便,里面使用的图片来源是从上面文章中的源码项目获取的.
说明:参考了上面文章中的思路,然后自己重新写了一个较为完整的图片本地缓存显示工具.
功能
1.第一次显示图片时下载到本地,然后之后如果本地存在缓存(根据url),则显示本地缓存的图片
2. 基于plus的storage,对每一个图片的缓存进行控制管理,增加时间戳参数,来控制本地缓存的有效时间
3. 将所有的下载任务放入队列中,进行统一下载管理,增加最大并发请求数,防止一次性请求过多损耗性能
4. 加入了图片缓存池机制,对于同一个下载路径的图片不会多次下载,而是填入缓存池,下载后统一回调
5. 修改了图片本地路径的获取方法,摆脱第三方依赖
6. 重构了代码,并入开发框架中

使用方法

* 外部API：注意,需要显示的图片需要有data-img-localcache这个属性(用来放目标url),dom需要是原生对象
 * 清除所有图片缓存:MobileFrame.ImageUtil.ImageLoaderFactory.clearLoaderImgsCache(successCb,errorCb)
 * 采取本地缓存显示所有图片:MobileFrame.ImageUtil.ImageLoaderFactory.setAllNetImgsWithLocalCache();
 * 清除某一张图片的本地缓存:MobileFrame.ImageUtil.ImageLoaderFactory.clearNetUrlImgCache(src);
 * 显示某一张图片:MobileFrame.ImageUtil.ImageLoaderFactory.setImgWidthLocalCache(dom,src);

源码

/**
 * @description   移动开发框架
 * @author dailc  dailc 
 * @version 1.0
 * @time 2016-01-11 16:57:57
 * 功能模块:只依赖于plus系统
 * @see http://ask.dcloud.net.cn/people/%E6%92%92%E7%BD%91%E8%A6%81%E8%A7%81%E9%B1%BC
 * 图片本地缓存模块********************************
 * 1.本地缓存显示图片
 * 2.增加storage,增加每一个本地缓存的有效时间戳
 * 3.增加自定义设置方法,可以根据不同需求,对参数进行修改
 * 4.采用下载队列进行下载管理,增加最大并发请求数,防止一次性请求过多损耗性能
 * 5.修改了图片本地路径的获取方法,摆脱第三方依赖
 * 6.重构代码
 * 外部API：注意,需要显示的图片需要有data-img-localcache这个属性(用来放目标url)
 * 清除所有图片缓存:MobileFrame.ImageUtil.ImageLoaderFactory.clearLoaderImgsCache(successCb,errorCb)
 * 采取本地缓存显示所有图片:MobileFrame.ImageUtil.ImageLoaderFactory.setAllNetImgsWithLocalCache();
 * 清除某一张图片的本地缓存:MobileFrame.ImageUtil.ImageLoaderFactory.clearNetUrlImgCache(src);
 * 显示某一张图片:MobileFrame.ImageUtil.ImageLoaderFactory.setImgWidthLocalCache(dom,src);
 * 图片本地缓存模块完毕********************************
 */
(function(global) {
    /**
     * 定义全局函数对象 define出来的
     */
    var mapping = {};
    /**
     * 缓存,正在用到的对象,函数中return 出来的,这样就不需要重复执行函数
     */
    var cache = {};
    /**
     * @description 模块定义
     * @param {String} id id
     * @param {Function} func 对应的函数对象
     */
    global.define = function(id, func) {
        mapping[id] = func;
    };
    /**
     * @description 生成模块对象,并采用本地缓存
     * @param {String} id
     */
    global.require = function(id) {
        if (!/.js$/.test(id)) {
            id += '.js';
        }
        if (cache[id]) {
            return cache[id];
        } else {
            return cache[id] = mapping[id]({});
        }
    };
    /**
     * @description 配置全局工具类以及一些需要用到的全局函数
     */
    (function() {
        global.MobileFrame = {};
        /**
         * 空函数
         */
        MobileFrame.noop = function() {};
        /**
         * @description each遍历操作
         * @param {type} elements
         * @param {type} callback
         * @returns {global}
         */
        MobileFrame.each = function(elements, callback, hasOwnProperty) {
            if (!elements) {
                return this;
            }
            if (typeof elements.length === 'number') {
                [].every.call(elements, function(el, idx) {
                    return callback.call(el, idx, el) !== false;
                });
            } else {
                for (var key in elements) {
                    if (hasOwnProperty) {
                        if (elements.hasOwnProperty(key)) {
                            if (callback.call(elements[key], key, elements[key]) === false) return elements;
                        }
                    } else {
                        if (callback.call(elements[key], key, elements[key]) === false) return elements;
                    }
                }
            }
            return global;
        };
        /**
         * @description plusReady
         * @param {Function} callback
         * @returns {global} 返回的是global
         */
        MobileFrame.plusReady = function(callback) {
            if (window.plus) {
                setTimeout(function() { //解决callback与plusready事件的执行时机问题(典型案例:showWaiting,closeWaiting)
                    callback();
                }, 0);
            } else {
                document.addEventListener("plusready", function() {
                    callback();
                }, false);
            }
            return global;
        };
        /**
         * @description 得到相对路径对应的key,这个key可以使缓存池的或者是本地缓存键值
         * 主要作用是去除非法字符
         * @param {String} relativePath
         */
        MobileFrame.getRelativePathKey = function(relativePath) {
            var finalKey =
                //                  relativePath.replace('/', '').replace('.', '').replace('/', '')
                //                  .replace('_download', '').replace('jpg', '');
                relativePath.replace(/[&|\*^%$#@-]/g, "");
            return finalKey;
        };
        /**
         * @description 更改url类型,去除cache,因为cache会造成一些困扰
         * @param {String} url 传入的url
         */
        MobileFrame.changImgUrlTypeNoCache = function(url) {
            url = url || '';
            if (url.indexOf('?') != -1) {
                url += '&timeRandKey=' + Math.random();
            } else {
                url += '?timeRandKey=' + Math.random();
            }
            return url;
        };
        /**
         * @description 删除指定路径的文件
         * @param {String} relativePath  绝对路径或相对路径例如:  _downloads/imgs/test.jpg
         * @param {Function} successCallback  删除成功回调
         * @param {Function} errorCallback  失败回调
         */
        MobileFrame.delFile = function(relativePath, successCallback, errorCallback) {
            if (!relativePath) {
                return;
            }
            MobileFrame.plusReady(function() {
                plus.io.resolveLocalFileSystemURL(relativePath, function(entry) {
                    entry.remove(function(entry) {
                        if (successCallback && typeof(successCallback) == 'function') {
                            successCallback(true);
                        }
                    }, function(e) {
                        if (errorCallback && typeof(errorCallback) == 'function') {
                            errorCallback('删除文件失败!');
                        }
                    });
                }, function() {
                    if (errorCallback && typeof(errorCallback) == 'function') {
                        errorCallback('打开文件路径失败!');
                    }
                });
            });
        };
        /**
         * @description 判断网络状态
         */
        function GetNetWorkState() {
            var NetStateStr = '未知';
            var types = {};
            types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
            types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
            types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
            types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
            types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
            types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
            types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";
            NetStateStr = types[plus.networkinfo.getCurrentType()];

            return NetStateStr;
        };
        /**
         * @description 判断是否有网络
         */
        MobileFrame.IsNetWorkCanUse = function() {
            var IsCanUseNetWork = false;
            if (GetNetWorkState() == '未知' || GetNetWorkState() == '未连接网络') {
                IsCanUseNetWork = false;
            } else {
                IsCanUseNetWork = true;
            }
            return IsCanUseNetWork;
        };
    })();
    /**
     * @description 定义模块功能-图片工具类
     */
    define('scripts/Core/ImageUtil.js', function(exports) {
        /**
         * @description 图片加载工厂,包含图片加载方法
         * 例如:时间戳控制缓存,下载队列批次下载,默认图片,下载loading图片,下载失败图片
         * 注意相对路径在Android:/sdcard/Android/data/io.dcloud.HBuilder/.HBuilder/...
         * iOS:/Library/Pandora/...
         */
        (function(ImgLoaderFactory) {
            /**
             * 默认的options
             */
            var defaultSettingOptions = {
                //默认的图片缓存目录-存到应用的downloads/imgs下
                'imgStoragePath': "_downloads/imgs/",
                //默认图片的基座路径
                'defaultImgBase': '../../img/mobileFrame/',
                //loading图片的名称
                'loadingImgName': 'img_loading.jpg',
                //error图片名称
                'errorImgName': 'img_error.jpg',
                //图片缓存的时间戳,毫秒单位,默认为1天
                'imgsTimeStamp': 1000 * 60 * 60 * 24 * 1,
                //同时最多的downloader 并发下载数目,默认为3个
                'concurrentDownloadCount': 3,
                //单个下载任务最大的请求时间,防止一些机型上无法触发错误回调,单位毫秒,默认10秒
                'maxTimeSingleDownloadTaskSpend': 1000 * 10
            };
            //默认的下载图片临时变量
            var defaultLoadingImg = defaultSettingOptions['defaultImgBase'] + defaultSettingOptions['loadingImgName'];
            //默认的显示图片临时变量
            var defaultImg = defaultSettingOptions['defaultImgBase'] + defaultSettingOptions['errorImgName'];
            /**
             * 图片缓存的session头部
             */
            var imageSessionKey_header = 'imageSessionKey_util_imgs_';
            /**
             * 图片缓存的session的管理者
             */
            var imageSessionManagerKey = 'imageSessionKey_util_Manager';
            /**
             * 图片缓存池,用来解决多张图片并发请求问题
             * 默认是空的,当有多张图片是同一个请求时,缓存池子中会有数据
             * 格式  {'url1':[dom1,dom2]}
             */
            var requestImgsPool = {};
            /**
             * 并发下载任务,包括下载队列,处理最大并发数下载
             */
            var concurrentDownloadTask = {
                //任务池-还没有下载的任务
                Queue: [],
                //当前正在下载的任务数量
                CurrentTaskCount: 0
            };
            /**
             * 当前的任务队列,包含任务的名称,以及时间戳-用来控制最大的超时时间,防止不能正常触发回调
             * 包含:
             * taskObj,timeBegin
             * 格式:{url1:{task1,time1}}
             */
            var currentDownloadTasks = {};
            /**
             * @description 将对应的图片缓存键值添加进入图片缓存管理中
             * @param {String} key 图片路径对应的key
             */
            function addImageSessionKeyToManager(key) {
                //获取管理者
                var manager = plus.storage.getItem(imageSessionManagerKey);
                if (manager == null) {
                    //如果以前的缓存为空,生成缓存
                    manager = [];
                } else {
                    try {
                        manager = JSON.parse(manager);
                    } catch (e) {}
                }
                if (manager.indexOf(key) == -1) {
                    manager.push(key);
                }
                plus.storage.setItem(imageSessionManagerKey, JSON.stringify(manager));
            };
            /**
             * @description 从缓存管理中移除相应的图片缓存
             * @param {String} key 图片路径对应的key
             */
            function removeImageSessionKeyFromManager(key) {
                //获取管理者
                var manager = plus.storage.getItem(imageSessionManagerKey);
                if (manager == null) {
                    //这时候肯定没有离线缓存
                    return;
                }
                try {
                    manager = JSON.parse(manager);
                } catch (e) {}
                var index = -1;
                for (var i = 0; i < manager.length || 0; i++) {
                    if (manager[i] == key) {
                        index = i;
                    }
                }
                if (index != -1) {
                    //删除对应的index位置
                    manager.splice(index, 1);
                    //重新存储
                    plus.storage.setItem(imageSessionManagerKey, JSON.stringify(manager));
                }
            };

            /**
             * 设置图片缓存key
             * @param {String} url
             * @param {JSON} value 存进去的是图片相关的所有属性,包括时间戳,本地路径等
             */
            function setImageSessionItem(url, value) {
                if (url == null) {
                    return;
                }
                //然后添加进入缓存管理者中
                addImageSessionKeyToManager(url);
                url = imageSessionKey_header + MobileFrame.getRelativePathKey(url);
                value = (value != null) ? value : '';
                value = (typeof(value) == 'string') ? value : JSON.stringify(value);
                plus.storage.setItem(url, value);

            };
            /**
             * 获取图片缓存key
             * @param {String} url
             * @return {JSON} item 返回的是一个json对象,包括图片相关的所有属性,包括时间戳,本地路径等
             * @example 包含属性:time localPath
             */
            function getImageSessionItem(url) {
                if (url == null) {
                    return null;
                }
                //去除非法字符
                url = imageSessionKey_header + MobileFrame.getRelativePathKey(url);
                var item = plus.storage.getItem(url);
                try {
                    if (item != null) {
                        item = JSON.parse(item);
                    }
                } catch (e) {}
                return item;
            };
            /**
             * 移除图片缓存key
             * @param {String} url
             */
            function removeImageSessionItem(url) {
                if (url == null) {
                    return null;
                }
                removeImageSessionKeyFromManager(url);
                //去除非法字符
                url = imageSessionKey_header + MobileFrame.getRelativePathKey(url);
                var items = plus.storage.removeItem(url);
            };
            /**
             * @description 设置图片的src地址,根据一个url,为所有需要的图片赋值
             * @param {HTMLElement} $img 图片的dom,这里为原生dom对象
             * @param {String} srcUrl 图片的路径
             * @param {String} relativePath 相对路径,用来判断缓存池的
             */
            function setImgSrc($img, srcUrl, relativePath) {
                if (!srcUrl) {
                    return;
                }
                setImgSrcByDom($img, srcUrl);
                //如果缓存池子中存在图片
                if (!relativePath) {
                    return;
                }
                var relativePathKey = MobileFrame.getRelativePathKey(relativePath);
                if (requestImgsPool && requestImgsPool[relativePathKey]) {
                    var imgsData = requestImgsPool[relativePathKey];
                    //如果是数组
                    if (Array.isArray(imgsData)) {
                        for (var i = 0; i < imgsData.length; i++) {
                            setImgSrcByDom(imgsData[i], srcUrl);
                        }
                    } else {
                        //单条数据--单个dom对象
                        setImgSrcByDom(imgsData, srcUrl);
                    }
                    if (srcUrl != defaultLoadingImg) {
                        //如果不是loading图片就清空
                        //清空图片池子中的该条键值
                        requestImgsPool[relativePathKey] = null;
                    }
                }
            };
            /**
             * @description 设置图片的src地址,一个dom和一个 src一一对应
             * @param {HTMLElement} $img 图片的dom,原生dom对象
             * @param {String} srcUrl 图片的路径
             */
            function setImgSrcByDom($img, srcUrl) {
                if (!$img || !($img instanceof HTMLElement)) {
                    //console.log('该dom不是原生对象,url:' + srcUrl);
                    return;
                }
                //暂时去除loading图片的独特样式
//              if (srcUrl == defaultLoadingImg) {
//                  //默认的loading图片,修改css
//                  $img.style.maxWidth = '30px';
//                  $img.style.maxHeight = '30px';
//              } else {
//                  //恢复普通高度
//                  $img.style.maxWidth = '100%';
//                  $img.style.maxHeight = '100%';
//              }
                srcUrl = MobileFrame.changImgUrlTypeNoCache(srcUrl);
                $img.setAttribute('src', srcUrl);
            };
            /**
             * @description 移除所有的图片缓存键
             */
            function clearAllImageSessionKey() {
                MobileFrame.plusReady(function() {
                    var manager = plus.storage.getItem(imageSessionManagerKey);
                    if (manager == null) {
                        //这时候肯定没有离线缓存
                        return;
                    }
                    try {
                        manager = JSON.parse(manager);
                    } catch (e) {}
                    if (Array.isArray(manager)) {
                        for (var i = 0; i < manager.length; i++) {
                            removeImageSessionItem(manager[i]);
                        }
                    }
                });

            };
            /**
             * @description 设置图片加载工具的一些基本参数
             * @param {JSON} options 参数
             * @example 参数没传代表使用默认值,包括:
             * imgStoragePath,string型,图片的默认路径
             * defaultImgBase,string型,默认图片的基座路径
             */
            ImgLoaderFactory.setOptions = function(options) {
                if (!options) {
                    return;
                }
                //设置参数
                for (var key in defaultSettingOptions) {
                    //如果设置的是有效的
                    if (options[key] != null) {
                        defaultSettingOptions[key] = options[key];
                    }
                }
                //默认的下载图片临时变量
                defaultLoadingImg = defaultSettingOptions['defaultImgBase'] + defaultSettingOptions['loadingImgName'];
                //默认的显示图片临时变量
                defaultImg = defaultSettingOptions['defaultImgBase'] + defaultSettingOptions['errorImgName'];
            };
            /**
             * @description 清除图片加载工厂的所有图片缓存
             * @param {Function} successCallback 成功回调
             * @param {Function} errorCallback 失败回调
             */
            ImgLoaderFactory.clearLoaderImgsCache = function(successCallback, errorCallback) {
                MobileFrame.plusReady(function() {
                    //遍历目录文件夹下的所有文件，然后删除
                    var tmpUrl = plus.io.convertLocalFileSystemURL(defaultSettingOptions['imgStoragePath']);
                    //需要手动加上 file://
                    tmpUrl = 'file://' + tmpUrl;
                    //同时清除所有的缓存键值
                    clearAllImageSessionKey();
                    plus.io.resolveLocalFileSystemURL(tmpUrl, function(entry) {
                        entry.removeRecursively(function() {
                            if (successCallback && typeof(successCallback) == 'function') {
                                successCallback('清除图片缓存成功!');
                            }
                        }, function() {
                            if (errorCallback && typeof(errorCallback) == 'function') {
                                errorCallback('清除图片缓存失败!');
                            }
                        });
                    }, function(e) {
                        if (errorCallback && typeof(errorCallback) == 'function') {
                            errorCallback('打开图片缓存目录失败!');
                        }
                    });
                });
            };
            /**
             * @description 从一个网络URL中,获取本地图片缓存相对路径
             * @param {String} loadUrl 图片的网络路径,如果为null,则返回一个null
             * @return {String} 返回路径或者是 ***outOfTime***表示缓存时间戳过去
             * @example 获取相对路径可以有很多种方法
             * 比如可以用md5将url加密,或者其它字符串操作等等
             * 我这里也是根据项目而进行自适应的
             */
            ImgLoaderFactory.getRelativePathFromLoadUrl = function(loadUrl) {
                if (loadUrl == null) return null;
                //如果loadUrl以../开头,代表是相对路径,采用本地相对路径,这里就直接返回本地路径,这样就是直接赋值了
                if (loadUrl.substring(0, 5).indexOf('../') != -1) {
                    return loadUrl;
                }
                //图片缓存如果存在,判断是否过期,默认为''
                var isOutOfTimeHeader = '';
                //如果存在本地缓存,并且没有过期,采用本地缓存中的图片
                var loacalImgSessionItem = getImageSessionItem(loadUrl);
                if (loacalImgSessionItem != null) {
                    //判断是否过期  time localPath
                    if (loacalImgSessionItem.time) {
                        loacalImgSessionItem.time = parseInt(loacalImgSessionItem.time, 10);
                        if ((new Date()).valueOf() - loacalImgSessionItem.time > defaultSettingOptions['imgsTimeStamp']) {
                            //console.log('当前缓存已经过期')
                            //返回一个特殊字符,代表过期 
                            isOutOfTimeHeader = '***outOfTime***';
                        } else {
                            //console.log('缓存未过期');
                        }
                    }
                    if (loacalImgSessionItem.localPath) {
                        return loacalImgSessionItem.localPath;
                    }
                }
                //获取图片后缀,如果没有获取到后缀,默认是jpg
                var imgSuffix = loadUrl.substring(loadUrl.lastIndexOf(".") + 1, loadUrl.length);
                if (
                    imgSuffix.toLocaleLowerCase() != ("jpg") &&
                    imgSuffix.toLocaleLowerCase() != ("jpeg") &&
                    imgSuffix.toLocaleLowerCase() != ("png") &&
                    imgSuffix.toLocaleLowerCase() != ("bmp") &&
                    imgSuffix.toLocaleLowerCase() != ("svg") &&
                    imgSuffix.toLocaleLowerCase() != ("gif")
                ) {
                    //如果后缀没有包含以上图片,将后缀改为jpg
                    imgSuffix = 'jpg';
                }
                //更换存储方式,变为将整个路径存储下来,然后去除非法字符
                var regIllegal = /[&|\*^%$#@-:.?/=!]/g;
                //获取图片名字
                var imgName = loadUrl.replace(regIllegal, '');
                //最终的名字
                var filename = imgName + '.' + imgSuffix;
                //console.log('loadurl:'+loadUrl+',fileName:'+filename);
                var relativePath = defaultSettingOptions['imgStoragePath'] + filename;
                setImageSessionItem(loadUrl, {
                    'localPath': relativePath,
                    'time': (new Date()).valueOf()
                });
                //将是否过期标识传出
                return isOutOfTimeHeader + relativePath;
            };

            /**
             * @description 删除某一张网络图片的本地缓存,同时也会删除缓存键值
             */
            ImgLoaderFactory.clearNetUrlImgCache = function(netImgUrl, successCallback, errorCallback) {
                MobileFrame.plusReady(function() {
                    //删除该键值对应的缓存
                    removeImageSessionItem(netImgUrl);
                    MobileFrame.delFile(ImgLoaderFactory.getRelativePathFromLoadUrl(netImgUrl), successCallback, errorCallback);
                });
            };

            /**
             * @description 给指定的图片dom 设置本地图片属性
             * @param {HTMLElement} $img 目标图片dom,这里为原生的dom对象
             * @param {String} relativePath 本地图片路径
             */
            function setImgFromLocalCache($img, relativePath) {
                /*例如:
                 * 本地相对路径("downloads/imgs/logo.jpg")转成SD卡绝对路径
                 * 例如相对路径:downloads/imgs/logo.jpg
                 * ("/storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/downloads/imgs/logo.jpg");
                 * */
                if (!relativePath) {
                    return;
                }
                MobileFrame.plusReady(function() {
                    var sd_path = plus.io.convertLocalFileSystemURL(relativePath);
                    setImgSrc($img, sd_path, relativePath);
                });
            };
            /**
             * @description 通过本地缓存的方法显示网络图片
             * @param {HTMLElement} $img 原生dom对象
             * @param {String} loadUrl loadurl
             */
            ImgLoaderFactory.setImgWidthLocalCache = function($img, loadUrl) {
                if ($img == null || loadUrl == null) return;
                MobileFrame.plusReady(function() {
                    var relativePath = ImgLoaderFactory.getRelativePathFromLoadUrl(loadUrl);
                    //判断需不需要将路径进行编码,如果是中文路径,需要编码后才能下载
                    var regChinese = /[u4E00-u9FA5]/g;
                    var tmpLoadUrl = loadUrl.replace(regChinese, 'chineseRemoveAfter');
                    if (tmpLoadUrl.indexOf('chineseRemoveAfter') != -1) {
                        loadUrl = encodeURI(loadUrl);
                    }
                    //判断是否已经缓存过期
                    var isCacheOutOfTime = false;
                    if (relativePath.indexOf('***outOfTime***') != -1) {
                        relativePath.replace('***outOfTime***', '');
                        isCacheOutOfTime = true;
                    }
                    if (relativePath == 'default.jpg') {
                        //设置默认图片
                        setImgSrc($img, defaultImg);
                    } else {
                        if (isCacheOutOfTime == false) {
                            //检查图片是否已存在
                            plus.io.resolveLocalFileSystemURL(relativePath, function(entry) {
                                //如果文件存在,则直接设置本地图片
                                setImgFromLocalCache($img, relativePath);
                            }, function(e) {
                                readyToGetNetImg($img, loadUrl, relativePath);
                            });
                        } else {
                            //否则,本地缓存已经过期,直接网络获取
                            readyToGetNetImg($img, loadUrl, relativePath);
                        }
                    }
                });
            };
            /**
             * @description 准备通过网络获取图片
             * @param {HTMLElement} $img 原生dom对象
             * @param {String} loadUrl loadurl
             * @param {String} relativePath 本地相对路径
             */
            function readyToGetNetImg($img, loadUrl, relativePath) {
                //如果文件不存在,上网下载
                if (MobileFrame.IsNetWorkCanUse() == true) {
                    //添加进入图片缓存池中
                    var relativePathKey = MobileFrame.getRelativePathKey(relativePath);
                    if (requestImgsPool && requestImgsPool[relativePathKey] && Array.isArray(requestImgsPool[relativePathKey])) {
                        //如果已经存在该条图片缓存池,代表这条资源已经进行请求了,只需要填进响应池子即可
                        //console.log('已经存在缓存池:'+loadUrl);
                        requestImgsPool[relativePathKey].push($img);
                        //设置一张加载中图片,这只是假象,其实并没有下载
                        setImgSrc($img, defaultLoadingImg);
                        return;
                    } else {
                        //新建缓存池
                        //console.log('新建缓存池:'+loadUrl);
                        requestImgsPool[relativePathKey] = [];
                        requestImgsPool[relativePathKey].push($img);
                    }
                    //如果网络状态能用,联网下载图片
                    setImgFromNet($img, loadUrl, relativePath);
                } else {
                    //采用本地默认图片
                    setImgSrc($img, defaultImg);
                }
            };
            /**
             * @description 从网络下载图片,并给指定的img dom赋值
             * @param {HTMLElement} $img 目标img 原生dom
             * @param {String} loadUrl 网络图片路径
             * @param {String} relativePath 图片下载后的本地路径,如果不指定,采用默认值 在_downloads/imgs/下
             */
            function setImgFromNet($img, loadUrl, relativePath) {
                relativePath = (typeof(relativePath) == 'string' && relativePath != '') ? relativePath : ImgLoaderFactory.getRelativePathFromLoadUrl(loadUrl);
                //下载参数
                var options = {
                    filename: relativePath,
                    timeout: 3,
                    retryInterval: 3
                };
                //解决ios的网络缓存问题
                loadUrl = MobileFrame.changImgUrlTypeNoCache(loadUrl);
                //1.将图片 设为默认的下载图片
                setImgSrc($img, defaultLoadingImg);
                //2.创建下载任务
                var dtask = plus.downloader.createDownload(loadUrl,
                    options,
                    function(d, status) {
                        if (status == 200) {
                            //下载成功
                            //console.log('绝对路径:'+d.filename);
                            //这里传入的是相对路径,方便缓存显示
                            setImgFromLocalCache($img, relativePath);
                        } else {
                            //下载失败,需删除本地临时文件,否则下次进来时会检查到图片已存在
                            //console.log("下载失败=" + status + "==" + relativePath);
                            //dtask.abort();//文档描述:取消下载,删除临时文件;(但经测试临时文件没有删除,故使用delFile()方法删除);
                            if (relativePath != null) {
                                MobileFrame.delFile(relativePath);
                            }
                            setImgSrc($img, defaultImg);
                        }
                        //下载完成,当前任务数-1,并重新检查下载队列
                        concurrentDownloadTask['CurrentTaskCount']--;
                        //下载完成,从当前下载队列中去除
                        currentDownloadTasks[dtask.url] = null;
                        executeDownloadTasks();
                    });
                //3.启动下载任务,添加进入下载队列中
                concurrentDownloadTask['Queue'].push(dtask);
                //执行并发下载队列
                executeDownloadTasks();
            };
            /**
             * @description 执行下载任务,通过队列中一个一个的进行
             */
            function executeDownloadTasks() {
                //console.log('检查下载队列');
                //先检查是否存在任务超时的
                for (var taskItem in currentDownloadTasks) {
                    if (currentDownloadTasks[taskItem] &&
                        currentDownloadTasks[taskItem].timeBegin && (new Date()).valueOf() - currentDownloadTasks[taskItem].timeBegin > defaultSettingOptions['maxTimeSingleDownloadTaskSpend']) {
                        //如果当前下载人已经超时,并且没有自动触发回调
                        //终止任务下载
                        currentDownloadTasks[taskItem].taskObj && currentDownloadTasks[taskItem].taskObj.abort&&currentDownloadTasks[taskItem].taskObj.abort();
                        concurrentDownloadTask['CurrentTaskCount']--;
                        //从当前任务队列中去除
                        currentDownloadTasks[taskItem] = null;
                        //console.log('存在超时的任务,手动剔除');
                    }
                }
                //如果当前下载任务小于并发下载数       
                if (concurrentDownloadTask['CurrentTaskCount'] < defaultSettingOptions['concurrentDownloadCount']) {
                    if (concurrentDownloadTask['Queue'].length > 0) {
                        //开启一个下载任务
                        var nowTask = concurrentDownloadTask['Queue'].shift();
                        nowTask.start()
                            //当前任务数++
                        concurrentDownloadTask['CurrentTaskCount']++;
                        currentDownloadTasks[nowTask.url] = {
                            taskObj: nowTask,
                            timeBegin: (new Date()).valueOf()
                        }
                        //console.log('添加一个下载任务');
                    }else{
                        //console.log('已经没有了下载任务');
                    }
                }else{
                    //console.log('已经达到最大下载数量,延迟下载');
                }
            };
            /**
             * @description 设置页面中的所有图片(本地缓存方式)
             * 注意,只有存在data-img-localcache 标签的图片才会有效果
             */
            ImgLoaderFactory.setAllNetImgsWithLocalCache = function() {
                //获取页面中所有的图片
                var imgs = document.querySelectorAll('img');
                MobileFrame.each(imgs, function(key, value) {
                    var src = this.getAttribute('data-img-localcache');
                    //console.log('显示图片:' + src);
                    if (src != null && src != '') {
                        ImgLoaderFactory.setImgWidthLocalCache(this, src);
                    }
                });
            };
        })(exports.ImageLoaderFactory = {});

        return exports;
    });
    /**
     * 生成模块
     */
    {
        MobileFrame.ImageUtil = require('scripts/Core/ImageUtil.js');
    }

})(this);

截图1

截图2

截图3