<script src="../../script/vue-lazyload.js"></script>
<img v-lazy="remoteUrl + pics_url" class="xunjian_pics" v-for="pics_url in item.pics_text">
Vue.use(VueLazyload, {
preLoad: 1.3,
error: '../../image/error.png',
attempt: 1,
filter: {
progressive(listener, options) {
// 实现渐近式加载图片(先加载模糊的图)
listener.el.setAttribute('lazy-progressive', 'true')//暂时不知道这个配置有什么用
//调用apicloud原装模块
api.imageCache({
url: listener.src
}, function(ret, err) {
if (ret.status) {
listener.src = ret.url;
console.log(listener.src);//在v-lazy中显示的图片路径
} else {
listener.src = ret.url;
console.log(listener.src);
}
})
},
}
});

用apicloud+vue的VueLazyload实现缓存图片懒加载的更多相关文章

  1. vue-lazyload 的使用(vue图片懒加载)

    github地址:https://github.com/hilongjw/vue-lazyload npm i vue-lazyload -S 或者 <script src="http ...

  2. vue 图片懒加载 vue-lazyload

    图片懒加载 在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽. ...

  3. vue + vue-lazyload 实现图片懒加载

    1.安装 npm i vue-lazyload -S 2.配置 main.js /***图片模板等懒加载 start ***/ import VueLazyload from 'vue-lazyloa ...

  4. Vue 自定义图片懒加载指令v-lazyload

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

  5. Vue图片懒加载

    图片懒加载的原理 先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src).当js监听到该图片元素进入可视窗口时,即将自定义属性 ...

  6. Vue图片懒加载之lazyload插件使用

    当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...

  7. vue-lazyload图片懒加载的简单使用

    一.vue lazyload插件: 插件地址:https://github.com/hilongjw/vue-lazyload demo:http://hilongjw.github.io/vue-l ...

  8. VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)

    在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...

  9. vue-lazyload 图片懒加载

    vue-lazyload简单使用 github地址:https://github.com/hilongjw/vue-lazyload 1.安装插件 npm install vue-lazyload - ...

随机推荐

  1. bcdedit删除uefi多余项

    1.检查是否有多余的启动项:用管理员权限的cmd运行Bcdedit /enum firmware 2.保存现在的所有引导项Bcdedit /export savebcdsavebcd是导出的文件名 3 ...

  2. Node.js 最早 npm 包 request 将被废弃

    相信 Node.js 开发者对 Request 都不会陌生,这是一个 Node.js 模块,以 npm 包的形式提供,是一个简单的 HTTP 客户端,通过它可方便地实现 HTTP 请求. 可以看到,r ...

  3. python2 'ascii'编码问题

    UnicodeDecodeError: 'ascii' codec can't decode byte 0xe4 in position 223: ordinal not in range(128) ...

  4. PAT Basic 1042 字符统计 (20 分)

    请编写程序,找出一段给定文字中出现最频繁的那个英文字母. 输入格式: 输入在一行中给出一个长度不超过 1000 的字符串.字符串由 ASCII 码表中任意可见字符及空格组成,至少包含 1 个英文字母, ...

  5. Berlekamp-Massey algorithm

    https://www.cnblogs.com/zzqsblog/p/6877339.html https://blog.csdn.net/qq_39972971/article/details/80 ...

  6. js 判断判断多选表单checkbox

    html代码 <input type="checkbox" class="ace auth_id" name="ckb[]" valu ...

  7. 34 String、StringBuffer、StringBuilder

    String的值是不可变的,这就导致每次对String的操作都会生成新的String对象,不仅效率低下,而且大量浪费有限的内存空间. StringBuffer是可变类,和线程安全的字符串操作类,任何对 ...

  8. Charles模拟数据

    安装好Charles 桌面创建json文件

  9. ZOJ 1610 Count the Colors (线段树成段更新)

    题意 : 给出 n 个染色操作,问你到最后区间上能看见的各个颜色所拥有的区间块有多少个 分析 : 使用线段树成段更新然后再暴力查询总区间的颜色信息即可,这里需要注意的是给区间染色,而不是给点染色,所以 ...

  10. JUnit——运行多个测试方法

    TDD=Test Drive Development   在实际应用中作用特别大,因为我们会定义很多的类和方法,也会存在很多的更新操作,这样如果用main函数进行测试,则会异常麻烦. 而如果用这种多个 ...