<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. 【leetcode 476】. Number Complement

    给定一个正整数,输出其补码. 思路:利用mask掩码进行异或, 利用 temp >> 1 大于0 来决定mask长度,求出的mask 为二进制 1 0 0 0 0类型,           ...

  2. Maven项目构建利器01——为什么要使用Maven

    1.为什么要使用Maven a)一个项目就是一个工程 如果一个项目非常庞大,不适合用package(包)来划分模块, 最好是每一个模块对应一个工程 分工合作,借助于Maven就可以将一个项目拆分成多个 ...

  3. U-boot工作流程分析

    bootloader的作用 bootloader就好比是航天飞机升天轨道上的助推器 程序入口:在_start这里 第一阶段程序分析: 1.设置中断向量表 2.设置处理器位SVC模式 3.0.刷新I/D ...

  4. 【ESXI6.0】 ESXI6.0安装时无法安装网卡驱动的解决方法及将网卡驱动加载进ISO

    http://blog.163.com/xifanliang@yeah/blog/static/115078488201571584321787/ 若安装时提示如下图所示 之后安装无法完成,会提示没有 ...

  5. IBM DS5020 管理口密码重置

    IBM DS5020 管理口密码重置 使用超级终端进行连接,输入回车,然后Ctrl+Break(有时需要多按几次),屏幕会出现设置波特率的提示: Send for shell access or ba ...

  6. 22_3mybaits——连接池

    1.连接池 我们在实际开发中都会使用连接池. 因为它可以减少我们获取连接所消耗的时间. 2.mybatis中的连接池 mybatis连接池提供了3种方式的配置: 配置的位置: 主配置文件SqlMapC ...

  7. 下载并安装eclipse

    一. 下载eclipse 1. 进入eclipse官网——www.eclipse.org 2. 点击“DOWNLOAD”,进入下载界面 3. 点击“Download Packages”,选择所需ecl ...

  8. jenkins打包maven工程发现有些包下载不下来

    将这些依赖的jar包放到mvn的本地仓库中,通常是用户主目录下的.m2/repository https://blog.csdn.net/taiyangdao/article/details/5228 ...

  9. Java并发编程实战 第6章 任务并行 第7章 取消与关闭

    ExecutorCompletionService CompletionService用来接收一个Executor的执行结果,将已经完成任务,放置在可使用 take 访问的队列上. 大概用法: Exe ...

  10. python的flex服务端数据接口开发

    python的flex服务端数据接口开发 python 如果给flex提供服务端,需要提供一个网关和一个可供客户端(flex)调用的类.这方面我更加推荐用twisted来写这个网关,因为twisted ...