<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. inittab - 与 sysv 兼容的 init 进程使用的初始化文件格式

    描述 inittab 文件描述在系统引导及通常的操作期间, 都启动哪些进程 (比如 /etc/init.d/boot, /etc/init.d/rc, getty 等等). Init(8) 讨论有关 ...

  2. 接口测试断言详解(Jmeter)

    接口测试是目前最主流的自动化测试手段,它向服务器发送请求,接收和解析响应结果,通过验证响应报文是否满足需求规约来验证系统逻辑正确性.接口的响应类型通过Content-Type指定,常见的响应类型有: ...

  3. Big Data(八)MapReduce的搭建和初步使用

    ---恢复内容开始--- 回顾: 1.最终开发MR的计算程序 2.hadoop 2.x 出现了一个yarn:资源管理>>MR没有后台场服务 yarn模型:container 容器,里面会运 ...

  4. 跨域 (2) cors

    html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. Flask【第11篇】:整合Flask中的目录结构

    整合Flask中的目录结构 一.SQLAlchemy-Utils 由于sqlalchemy中没有提供choice方法,所以借助SQLAlchemy-Utils组件提供的choice方法 import ...

  6. SP Flash Tool版本对应MTK处理器型号(SP Flash Tool 版本速查)

    SP Flash Tool v3.1224.0.100 MT6516,MT6573,MT6573,MT6575,MT6575,MT6577, SP Flash Tool v3.1332.0.187 M ...

  7. 【LuoguP5280】[ZJOI2019] 线段树

    题目链接 题目描述 略 Sol 显然不能直接暴力模拟. 观察这个东西本质在干什么,就是某一次操作可能进行可能不进行,然后求所有情况下被标记节点总数. 这个显然可以转化为概率问题,每次有二分之一的概率进 ...

  8. 【Spring】Spring-Session-Data-Redis实现session共享

    前言 在开发中遇到一个关于用户体验的问题,每次当运维进行更新重启服务器时,都会导致会员平台中已登录的用户掉线.这是因为每个用户的会话信息及状态都是由session来保存的,而session对象是由服务 ...

  9. Collections 工具类和 Arrays 工具类常见方法

    Collections Collections 工具类常用方法: 排序 查找,替换操作 同步控制(不推荐,需要线程安全的集合类型时请考虑使用 JUC 包下的并发集合) 排序操作 void revers ...

  10. [LOJ 6704] 健身计划

    问题描述 九条可怜是一个肥胖的女孩. 她最近长胖了,她想要通过健身达到减肥的目的,于是她决定每天做n次仰卧起坐以达到健身的目的. 她可以将这n次动作分为若干组完成,每一次完成ai次仰卧起坐,每做完一次 ...