wenju
wenju
  • 发布:2015-06-26 13:18
  • 更新:2023-06-02 15:40
  • 阅读:47811

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

分类:5+ SDK

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

37 关注 分享
jwenlee 蔡繁荣 DCloud_heavensoft lafer jukai chenxiing Liosixer damdmen imengxin 2***@qq.com 时光可见 freedemon xiaoluo diken 1***@qq.com 罗罗诺亚索隆 l***@yeah.net 语嫣 3***@qq.com RyanHooper 1***@qq.com 田云 2***@qq.com 阿澡惜 Trust keoy k***@sina.com shwanYu j***@163.com 1***@qq.com yaYY 启程588 l***@163.com j***@qq.com liucheng100 一抱一个胖猪猪 1***@qq.com

要回复文章请先登录注册

前端开发者福建

前端开发者福建

安卓挺正常的,plus.io.convertLocalFileSystemURL转换完的路径,iOS的显示不出来,用plus.io.getImageInfo会返回读取失败。
2023-06-02 15:40
莫伊

莫伊

Uncaught TypeError: mui.init is not a function报错,mui.js我难道引入错了?mui.js文件链接能发我一下吗?
2020-04-30 18:07
we_cant_stop

we_cant_stop

mark
2019-12-01 00:26
7***@qq.com

7***@qq.com

mark
2019-10-31 09:48
苛学加

苛学加

mark
2019-04-19 10:29
1***@qq.com

1***@qq.com

写的很好,很成功,一次就运行成功了……,赞一个
2018-12-14 21:39
游客2017

游客2017

不错
2018-12-01 12:35
JiyunXin

JiyunXin

为什么无格式后台生成的地址不能下载成功!接口返回的二进制图片
2018-11-29 18:30
7***@qq.com

7***@qq.com

方案提供了很多有价值的信息,谢谢
2018-08-31 17:11
崔岩松

崔岩松

mark
2018-08-16 10:17