<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. apache 部署

    <VirtualHost *:80> ServerAdmin webmaster@dummy-host.localhost DocumentRoot "D:/EmpireServ ...

  2. Jmeter分布式测试dubbo接口1

    最近工作中接到一个需求,需要对一个Dubbo接口进行压力测试,测试其性能,之前一直使用jmeter做压力测试,在踏了好多坑之后,决定把这些记录下来,顺便也希望能帮助到大家. 开始测试之前,我们需要先知 ...

  3. (转) weblogic 12c忘记密码

    weblogic安装后,很久不用,忘记访问控制台的用户名或者密码,可通过以下步骤来重置用户名密码. 说明:%DOMAIN_HOME%:指WebLogic Server 域(Domain)目录 我的是: ...

  4. python中字符串格式化的两种方法

    知识点汇总;1-字符串格式化输出方法一: % 1-print('名字是 %s,年龄是%s' % (name ,age)) 2- %s ---字符串-----相当于执行了str() 3- (name , ...

  5. web.xml中url-pattern中/和/*的区别(来自网络)

    其中/和/*的区别: < url-pattern > / </ url-pattern >   不会匹配到*.jsp,即:*.jsp不会进入spring的 Dispatcher ...

  6. SpringMVC POJO入参过程分析

    SpringMVC确定目标方法POJO类型的入参过程 1.确认一个key: (1).若目标方法的POJO类型的参数没有使用@ModelAttribute作为修饰,则key为POJO类名第一个字母的小写 ...

  7. java作业利用递归解决问题

    第一题 利用递归求组合数 设计思想 (1)首先根据公式求,利用递归完成阶乘函数的初始化,并且通过调用阶乘,实现公式计算 (2)递推方法,根据杨辉三角的特点,设置二维数组,从上到下依次保存杨辉三角所得数 ...

  8. percona 5.7 + tokudb

    percona 5.7 + tokudb Percona + TokuDB 部署 # 参考资料https://www.kancloud.cn/devops-centos/centos-linux-de ...

  9. Pycharm中文显示异常

    pycharm2019,中文显示乱码异常,配置了encoding为utf8还是不行,需要设置备用字体 原因是某些英文字体库不支持非英文字符,无法显示 设置fallback字体 File-setting ...

  10. Nmap使用及常见的参数选项

    概要 当Nmap不带选项运行时,该选项概要会被输出,最新的版本在这里http://www.insecure.org/nmap/data/nmap.usage.txt.它有助于人们记住最常用的选项,但不 ...