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>

 

posted @ 2017-07-12 13:19  惊觉小菜鸟  阅读(573)  评论(0)  编辑  收藏  举报