使用跨平台技术h5plus实现应用图片本地缓存

在大哥王（andy）神一样的带领下，我们牛逼闪闪的走上了使用h5plus技术实现跨平台技术开发的道路，一路高歌！！！

下面我要分享的内容是如何实现图片本地缓存。

废话不说，直接看代码：

/**
 * 声明获取图片的方法
 * @param {Object} picUrl 图片的网络地址
 * @param {Object} defaultPic 默认图片
 * @param {Object} element 图片源元素
 */
function fetchImage(picUrl, defaultPic, element) {
	//将图片网络地址进行md5摘要。
	var filename = hex_md5(picUrl);
	element.setAttribute("src", defaultPic);
	//尝试加载本地图片
	plus.io.resolveLocalFileSystemURL("_downloads/" + filename, function(entry) {
		// 加载本地图片成功
		entry.file( function(file){
			if(file.size==0){
				//console.log("2.1图片为空显示默认");
				element.setAttribute("src", defaultPic);
			}else{
				var path = plus.io.convertLocalFileSystemURL("_downloads/" + filename);
				//console.log("2.1加载本地图片"+path);
				element.setAttribute("src", path);
			}
		});
	}, function(e) {
		//加载本地图片失败，本地没有该图片，尝试从网络下载图片并保存本地，保存文件名为url摘要md5值
		var dtask = plus.downloader.createDownload(picUrl, {filename:filename}, function(d, status) {
			// 下载完成
			if (status == 200) {
				if(d.downloadedSize==0){
					//console.log("2.2图片为空显示默认");
					element.setAttribute("src", defaultPic);
				}else{
					//console.log("2.2下载网络文件成功"+d.url);
					element.setAttribute("src", d.url);	
				}
			}
		});
		dtask.start();
	});
}

以上主要用到h5plus的两个重要的api

1.Downloader模块管理网络文件下载任务，用于从服务器下载各种文件，并支持跨域访问操作。

详见官方：http://www.html5plus.org/doc/zh_cn/downloader.html

2.IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象。

详见官方：

http://www.html5plus.org/doc/zh_cn/io.html

刚开始做的时候准备使用html5的indexedDB存储图片来的，但是后来发现在移动设备上不好用。参考https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/