<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. AIX用户和组管理

    1.用户登录和初始化

  2. HDU5840 Problem This world need more Zhu 分块 树剖

    给一颗n个点的有点权的树,有m个询问,对于每个询问u,v,k,首先将点u到点v的最短路径上的所有点按顺序编号,u的编号为1,求树链上所有点的新编号cnt满足cnt%k==0的点的权值的最大值.n,m, ...

  3. feign请求写法

    @FeignClient(value = "test", url = "${proxy.srvs.test:}") public interface ISubS ...

  4. Spring 整合过滤器

    过滤器Filter是Servlet的一个技术,可通过过滤器对请求进行拦截,比如读取session判断用户是否登录.判断访问的请求URL是否有权限. 1.使用@WebFilter注解 controlle ...

  5. webpack 搭建React(手动搭建)

    前言 最近真的都是在瞎学,看到自己不是很明白的东西,都喜欢自己手动去敲1到3遍(晚上下班的时候咯), 瞧,React  基于webpack 搭建,react 官方有一套手脚架工具,我自己也搭建过确实挺 ...

  6. /etc/sysconfig/network-scripts/ifcfg-ens33

    因为最近重新搭建CDH集群: DEVICE     接口名(设备,网卡) USERCTL    [yes|no](非root用户是否可以控制该设备) BOOTPROTO  IP的配置方法[none|s ...

  7. JavaWeb面试篇(7)

    61,JDBC访问数据库的基本步骤是什么?1,加载驱动2,通过DriverManager对象获取连接对象Connection3,通过连接对象获取会话4,通过会话进行数据的增删改查,封装对象5,关闭资源 ...

  8. html address标签 语法

    html address标签 语法 作用:定义文档作者/所有者的联系信息. 说明:如果 <address> 元素位于 <body> 元素内部,则它表示该文档作者/所有者的联系信 ...

  9. Python字典实现

    这篇文章描述了在Python中字典是如何实现的. 字典通过键(key)来索引,它可以被看做是关联数组.我们在一个字典中添加3个键/值对: >>> d = {'a': 1, 'b': ...

  10. chrome插件报错原因

    Chrome报错提示Unchecked runtime.lastError: The message port closed before a response was received. 出错原因: ...