之前展示图片都是通过<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>

h5+的Downloader下载网络图片缓存到本地的案例的更多相关文章

  1. 请求网络图片缓存到本地 ,还有一些现成的图片加载框架的使用 Ace网络篇(一)

    现在去买年货~~~~~~ 占坑, 现在来填坑 填完睡觉,感谢这俩月的把自己往死里逼得奋斗从JAVA什么都不懂到现在,做这些也是给在自学路上的新人(我也是菜鸟)一点点我力所能及的帮助,等我水平更高了还会 ...

  2. Android 下载网络图片保存到本地

    通过网络地址获取网络图片,点击下载将图片显示出来,然后点击图片将图片保存到本地. 首先需要在manifest上添加一些权限: <!-- 访问网络的权限 --> <uses-permi ...

  3. Retrofit 下载网络图片 保存到本地

    private void downImage(String imagePath) { try { CommonV2Api.downloadFile(mContext, imagePath, new I ...

  4. 【python】下载网络文件到本地

    # 下载网络图片文件到本地 import urllib.request rsp=urllib.request.urlopen("http://n.sinaimg.cn/ent/transfo ...

  5. ImageLoader(多线程网络图片加载)+本地缓存 for windowsphone 7

    搞了好长一阵子wp,做点好事. C/S手机app中应用最多的是  获取网络图片,缓存到本地,展示图片 本次主要对其中的delay:LowProfileImageLoader进行修改,在获取图片的时候, ...

  6. android下载网络图片并缓存

    异步下载网络图片,并提供是否缓存至内存或外部文件的功能 异步加载类AsyncImageLoader public void downloadImage(final String url, final ...

  7. android 下载网络图片并缓存

    异步下载网络图片,并提供是否缓存至内存或外部文件的功能 异步加载类AsyncImageLoader public void downloadImage(final String url, final ...

  8. .Net 使用爬虫下载网络图片到本地磁盘

    准备: 1.新建控制台项目 2.引用System.Drawing类库 3.安装HtmlAgilityPack 1.5.2.0 4.如果不会XPath语法的话,建议简单看下 代码: static voi ...

  9. Android开发利用Volley框架下载和缓存网络图片

    2013年Google I/O大会上推出了一种新的网络通信框架——Volley,Volley可是说是把AsyncHttpClient和Universal-Image-Loader的优点集于了一身,既可 ...

随机推荐

  1. ZOJ 3635 Cinema in Akiba （第一次组队） 树状数组+二分

    Cinema in Akiba Time Limit: 3 Seconds      Memory Limit: 65536 KB Cinema in Akiba (CIA) is a small b ...

  2. 【LeetCode】065-验证数字

    写在前面 前面研究OS的经历实在是令人心力憔悴..所以换个新鲜的,把自己的刷题感悟整理一番.刷了有些题了,就先拿最近几天hard题打头阵吧.首先说的是(065)Valid Number这个题,其实一眼 ...

  3. web.config中的connectionString里面应该怎么写?

    2009-09-16 10:19信欣玛利 | 浏览 6068 次  网络 就是具体格式.. 谁能举个例子? asp.net 3.5的. 2009-09-16 10:40   提问者采纳   这是用来连 ...

  4. SVN文件排除

    背景:原来SVN库人事2.0在24.42server上,后来server改革,把库迁移到了24.248server上. 原来24.42上的库,在update或commit后文件总是绿色的.看着心里特别 ...

  5. FragmentTabHost的应用

    原创)FragmentTabHost的应用(fragment学习系列文章之二) 时间 2014-04-14 00:11:46  CSDN博客 原文  http://blog.csdn.net/flyi ...

  6. [boostrap]debian下为arm创建debian和emdebian文件系统

    转自:http://www.cnblogs.com/qiaoqiao2003/p/3738552.html Debian系统本身包含对arm的支持,其包含的软件包最多,但是最终的文件系统要大一些. e ...

  7. 用分立元件实现串口通讯TTL/RS232电平转换

    1.计算机串口通信的RS-232电平:用正负电压来表示逻辑状态.逻辑1= = -3V--15V,逻辑0=+3-+15V. 2.单片机串口通信的TTL电平:输出高电平>2.4V,输出低电平< ...

  8. 去掉Scala的糖衣(4) -- Type Aliase

    我的新博客地址:http://cuipengfei.me/blog/2013/12/23/desugar-scala-4/ Scala中有一个type关键字,用来给类型或者是操作起别名,用起来很是方便 ...

  9. 关于Unity5.5中2D动画的制作

    1.首先要创建一个精灵 GameProject--2Dproject--Sprite 叫bird 2.给这个精灵附加纹理,并让它显示自己想让它显示的场景层中,一般它的静止纹理就是动画的第一张图片 3. ...

  10. php -- php的事务处理

    MYSQL的事务处理主要有两种方法. 1.用begin,rollback,commit来实现 begin 开始一个事务 rollback 事务回滚 commit 事务确认 2.直接用set来改变mys ...