【apicloud】vue.js使用图片缓存

apicloud论坛上搜寻到的VUE缓存图片方法源码，感谢 课程格子 的分享

html代码

1. <img class="cacheImg_1" :srcpath="image" />
   

2. <div class="cacheImg_2" :srcpath="image"></div>

js使用代码
ajax或者其他方式获取到网络图片之后执行此方法
使用$nextTick是为了保证页面已经渲染成功，attr方法才能成功设置属性

1. vue.$nextTick(function() {
   

2.   imgcache(1, $('.cacheImg_1'));
   

3.   imgcache(2, $('.cacheImg_2'));
   

4. });

js调用方法
参数说明：type为1时代表设置image标签的src属性，type为2时代表设置背景图片
                 selector代表所需要设置的html元素

1. function imgcache(type, selector) {
   

2.     selector.each(function(data) {
   

3.         ! function(data) {
   

4.             var url = selector.eq(data).attr("srcpath");
   

5.             api.imageCache({
   

6.                 url: url,
   

7.                 policy: "cache_only",
   

8.                 thumbnail: false
   

9.             }, function(ret, err) {
   

10.                 if (type == 1) {
    

11.                     selector.eq(data).attr('src', ret.url);
    

12.                 } else {
    

13.                     selector.eq(data).css('backgroundImage', 'url("' + ret.url + '")');
    

14.                 }
    

15.             });
    

16.         }(data);
    

17.     });
    

18. }

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 【apicloud】侧滑删除列表模板
• 下一篇： 【apicloud】关于IOSGuideline 3.1.1问题