需求
最近项目中遇到移动端首页需要加载一些图片,并且有些图片很大并且更新不频繁
原理
原理就是根据网络图片的的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);
}