h5+的Downloader下载网络图片缓存到本地的案例
之前展示图片都是通过<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>h5+的Downloader下载网络图片缓存到本地的案例的更多相关文章
- 请求网络图片缓存到本地 ,还有一些现成的图片加载框架的使用 Ace网络篇(一)
现在去买年货~~~~~~ 占坑, 现在来填坑 填完睡觉,感谢这俩月的把自己往死里逼得奋斗从JAVA什么都不懂到现在,做这些也是给在自学路上的新人(我也是菜鸟)一点点我力所能及的帮助,等我水平更高了还会 ...
- Android 下载网络图片保存到本地
通过网络地址获取网络图片,点击下载将图片显示出来,然后点击图片将图片保存到本地. 首先需要在manifest上添加一些权限: <!-- 访问网络的权限 --> <uses-permi ...
- Retrofit 下载网络图片 保存到本地
private void downImage(String imagePath) { try { CommonV2Api.downloadFile(mContext, imagePath, new I ...
- 【python】下载网络文件到本地
# 下载网络图片文件到本地 import urllib.request rsp=urllib.request.urlopen("http://n.sinaimg.cn/ent/transfo ...
- ImageLoader(多线程网络图片加载)+本地缓存 for windowsphone 7
搞了好长一阵子wp,做点好事. C/S手机app中应用最多的是 获取网络图片,缓存到本地,展示图片 本次主要对其中的delay:LowProfileImageLoader进行修改,在获取图片的时候, ...
- android下载网络图片并缓存
异步下载网络图片,并提供是否缓存至内存或外部文件的功能 异步加载类AsyncImageLoader public void downloadImage(final String url, final ...
- android 下载网络图片并缓存
异步下载网络图片,并提供是否缓存至内存或外部文件的功能 异步加载类AsyncImageLoader public void downloadImage(final String url, final ...
- .Net 使用爬虫下载网络图片到本地磁盘
准备: 1.新建控制台项目 2.引用System.Drawing类库 3.安装HtmlAgilityPack 1.5.2.0 4.如果不会XPath语法的话,建议简单看下 代码: static voi ...
- Android开发利用Volley框架下载和缓存网络图片
2013年Google I/O大会上推出了一种新的网络通信框架——Volley,Volley可是说是把AsyncHttpClient和Universal-Image-Loader的优点集于了一身,既可 ...
随机推荐
- CSplashScene类
#ifndef __TRANSITIONSCENE_H__ #define __TRANSITIONSCENE_H__ #include "GameFrameHead.h" cla ...
- maven使用deploy发布到本地仓库
使用maven可以方便的开发好的jar包发布到本地仓库中,方便其他项目依赖使用,在pom.xml文件中添加如下的配置: <distributionManagement> <repos ...
- char数组与string转换
1.char数组转string 有很多种方法: 假设c字符串定义为char ch[]="hello world!"; 1.向构造函数传入c字符串创建string对象: string ...
- CentOS 6.2修改主机名
写在前面的话:因为服务器要统一主机名,但是在安装的时候忘记设置了,所以需要修改主机名 需要修改两处:一处是/etc/sysconfig/network,另一处是/etc/hosts,只修改任一处会 ...
- 整合hibernate的lucene大数据模糊查询
大数据模糊查询lucene 对工作单使用 like模糊查询时,实际上 数据库内部索引无法使用 ,需要逐条比较查询内容,效率比较低在数据量很多情况下, 提供模糊查询性能,我们可以使用lucene全文 ...
- 利用eclipse的search功能搜索当前项目的源文件
当你项目的源文件太多,文件组织结构太复杂的的时候,有时候希望google来帮你一把?给个关键字就把相关的搜索结果给出来? eclipse的search功能基本上就可以完成这个任务,文件搜索,甚至JAV ...
- dfs带状态改变的做法
所谓带状态改变是指:在搜索到某个位置的时候,状态发生改变,继续计算步数. 给一个例题: 蒜头君要回家,但是他家的钥匙在他的朋友花椰妹手里,他要先从花椰妹手里取得钥匙才能回到家.花椰妹告诉他:“你家的钥 ...
- oracle db_*和v$*表
dba_开头 dba_users 数据库用户信息 dba_segments 表段信息 dba_extents 数据区信息 dba_objects 数据库对象信息 ...
- 基于js鼠标拖动图片排序
分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...
- excel鼠标拖选慢shift选择快的问题
今天遇到个惊天大坑,关于excel的,最近,一直在调查这个东西,刚开始真的是毫无头绪,反正现在就是excel的值的copy会偶尔慢,慢的情况也是不明白,就是稀里糊涂的调查. 刚开始连100%再现这个b ...