h5+的Downloader下载网络图片缓存到本地的案例

时间 2019-12-09

原文原文链接

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

用Android机测试是成功的,苹果机尚未试:html

<!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>