【分享交流】h5+的Downloader下载网络图片缓存到本地的案例

之前展示图片都是通过<img src="网络图片地址"> , 每次都请求服务器, 加载比较慢;
如何做到显示图片的时候先从本地获取,没有则联网下载,缓存到本地;下次直接从本地拿,无需再联网;

看了文档,逛了论坛,没有找到现成的案例,折腾了老半天,走了好多弯路,把自己写的分享给大家,
我用Android机测试是成功的,苹果机还没有试,有问题欢迎指出:


<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    </head>  

    <body>  
        <div class="mui-content">  
            <img id="img1"/>  
            <img id="img2"/>  
            <img id="img3"/>  
        </div>  
    </body>  

    <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>   
    <script type="text/javascript" charset="utf-8">  
        mui.init(); //mui初始化  
        mui.plusReady(function() {  
            setImg("img1", "http://ask.dcloud.net.cn/uploads/avatar/000/00/00/16_avatar_max.jpg");  
            setImg("img2", "http://client.bbzuche.com/resources/product/2014012094648828751145/20150611/logo.jpg");  
            setImg("img3", "http://www.bbzuche.com/images/tan.jpg");  
        });  

        /*<img>设置图片  
         *1.从本地获取,如果本地存在,则直接设置图片  
         *2.如果本地不存在则联网下载,缓存到本地,再设置图片  
         * */  
        function setImg(imgId, loadUrl) {  
                if (imgId == null || loadUrl == null) return;  
                //图片下载成功 默认保存在本地相对路径的"_downloads"文件夹里面, 如"_downloads/logo.jpg"  
                var filename = loadUrl.substring(loadUrl.lastIndexOf("/") + 1, loadUrl.length);  
                var relativePath = "_downloads/" + filename;  
                //检查图片是否已存在  
                plus.io.resolveLocalFileSystemURL(relativePath, function(entry) {  
                    console.log("图片存在,直接设置=" + relativePath);  
                    //如果文件存在,则直接设置本地图片  
                    setImgFromLocal(imgId, relativePath);  
                }, function(e) {  
                    console.log("图片不存在,联网下载=" + relativePath);  
                    //如果文件不存在,联网下载图片  
                    setImgFromNet (imgId,loadUrl,relativePath);  
                });  
            }  

        /*给图片标签<img>设置本地图片  
         * imgId 图片标签<img>的id  
         * relativePath 本地相对路径 例如:"_downloads/logo.jpg"  
         */  
        function setImgFromLocal(imgId, relativePath) {  
                //本地相对路径("_downloads/logo.jpg")转成SD卡绝对路径("/storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/downloads/logo.jpg");  
                var sd_path = plus.io.convertLocalFileSystemURL(relativePath);  
                //给<img>设置图片  
                $id(imgId).setAttribute("src", sd_path);  
            }  

        /*联网下载图片,并设置给<img>*/  
        function setImgFromNet (imgId,loadUrl,relativePath) {  
            //先设置下载中的默认图片  
            $id(imgId).setAttribute("src", "../images/loading.png");  
            //创建下载任务  
            var dtask = plus.downloader.createDownload(loadUrl, {}, function(d, status) {  
                if (status == 200) {  
                    //下载成功  
                    console.log("下载成功=" + relativePath);  
                    setImgFromLocal(imgId, d.filename);  
                } else {  
                    //下载失败,需删除本地临时文件,否则下次进来时会检查到图片已存在  
                    console.log("下载失败=" + status+"=="+relativePath);  
                    //dtask.abort();//文档描述:取消下载,删除临时文件;(但经测试临时文件没有删除,故使用delFile()方法删除);  
                    if (relativePath!=null)  
                        delFile(relativePath);  
                }  
            });  
            //启动下载任务  
            dtask.start();  
        }  

        /*删除指定文件*/  
        function delFile(relativePath) {  
            plus.io.resolveLocalFileSystemURL(relativePath, function(entry) {  
                entry.remove(function(entry) {  
                    console.log("文件删除成功==" + relativePath);  
                }, function(e) {  
                    console.log("文件删除失败=" + relativePath);  
                });  
            });  
        }  

        /*根据id查找元素*/  
        function $id(id) {  
            return document.getElementById(id);  
        }  

    </script>  

</html>