需求

最近專案中遇到移動端首頁需要載入一些圖片，並且有些圖片很大並且更新不頻繁

原理

原理就是根據網路圖片的的url來判定本地是否存在該圖片，不存在就根據網路圖片的url下載該圖片，並把頁面上的圖片路徑替換成本地快取路徑；如果存在就直接使用本地圖片路徑。

準備

需要學習的模組：
1、IO模組管理本地檔案系統：http://www.html5plus.org/doc/zh_cn/io.html；
2、Downloader模組管理網路檔案下載任務：http://www.html5plus.org/doc/zh_cn/downloader.html

實踐

/*
 *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) {
		//如果檔案存在,則直接設定本地圖片
		setImgFromLocal(imgId, relativePath);
	}, function(e) {
		//如果檔案不存在,聯網下載圖片
		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>設定圖片 type == 0 img src ;1 background
	$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) {
			//下載成功
			setImgFromLocal(imgId, d.filename);
		} else {
			//下載失敗,需刪除本地臨時檔案,否則下次進來時會檢查到圖片已存在
			//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);
}