决定像罗胖一样,坚持转发他的60“语音, 看我能不能一样坚持下来!

apiCloud 开发手机app中,json与图片缓存问题

技术笔记 eagle 7162℃ 0评论

在研究中, 试验了好久, 最后群里的Lancer网友指导下终于搞定了, 在列表商品时缓存图片,同时解决了json的缓存问题, 这样,在断网时也有数据可以显示。

原理:

  • 获取远端的json数据
  • 拼装html,在有图片位置设定一个占位图标,就是首先展示给用户的是数据加一个本地提示图片。在img 中加个data-url 真实的远端图片地址
  • 展示图片后,抓取img标签内的data-url,用imageCache方法循环缓存图片
  • 注意替换方法在imagecache 方法中完成要不你在其它地方拿不到dom标签
  • 远端的json要开数据缓存这样,在断网时也有内容显示。

在调试中遇到的问题就是在那个点去做替换图片, 一开始试了几个点,都拿不到动态js拼接的html元素。 在高人指点下, 在缓存图片的位置可以接收dom对象,就地替换掉图片。

主要的代码如下:

1. 图片缓存方法
//图片缓存方法
function imagecache(domObj,url){
api.imageCache({
url: url,
policy: ‘cache_only’,
thumbnail: false
},function(ret, err){
var path;
if(ret){
domObj.src=ret.url; //替换src
path = ret.url;
}else{
path = url;
}
});
}

这里接收了,远端的图片url地址 , 还有替换的目标对象。

2. ajax 代码

b255716c-d0bb-44fa-a3d3-1cf865414ab4

绿框位置是调用缓存图片的方法

8f7cc6e8-4bec-4bea-a66d-d7499580182b

html 部份的也贴一下吧

调试时我用的wifi同步功能。可以在调试点用console.warn() 来输出到ide中查看调试信息

希望能帮助像我一样的菜鸟。转发请保留出处谢谢了! http://www.iooe.cn  QQ:20696662

转载请注明:艾依小站 » apiCloud 开发手机app中,json与图片缓存问题

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址