vue.js使用图片缓存

课程格子

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. }

复制代码

飞翔的翔

马克一下

VvVv1o

赞一个

筦陶

顶一下

易大侠

顶一下

辉哥_0808

嗯

高傲的大叔

这.........

豪气布拉格

赞一个