用apicloud+vue的VueLazyload实现缓存图片懒加载
<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实现缓存图片懒加载的更多相关文章
- vue-lazyload 的使用(vue图片懒加载)
github地址:https://github.com/hilongjw/vue-lazyload npm i vue-lazyload -S 或者 <script src="http ...
- vue 图片懒加载 vue-lazyload
图片懒加载 在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽. ...
- vue + vue-lazyload 实现图片懒加载
1.安装 npm i vue-lazyload -S 2.配置 main.js /***图片模板等懒加载 start ***/ import VueLazyload from 'vue-lazyloa ...
- Vue 自定义图片懒加载指令v-lazyload
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...
- Vue图片懒加载
图片懒加载的原理 先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src).当js监听到该图片元素进入可视窗口时,即将自定义属性 ...
- Vue图片懒加载之lazyload插件使用
当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...
- vue-lazyload图片懒加载的简单使用
一.vue lazyload插件: 插件地址:https://github.com/hilongjw/vue-lazyload demo:http://hilongjw.github.io/vue-l ...
- VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)
在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...
- vue-lazyload 图片懒加载
vue-lazyload简单使用 github地址:https://github.com/hilongjw/vue-lazyload 1.安装插件 npm install vue-lazyload - ...
随机推荐
- 安装最新版本的kubernets(+安装插件dashboard)
一.安装docker // 安装系统工具: sudo yum install -y yum-utils device-mapper-persistent-data lvm2 // 添加docker y ...
- Linux20期学习笔记 Day1
Linux就该这么学第一章 1.4重置root管理员密码 放到红帽RHCSA考前辅导视频 源代码安装: 弊端:(好处第二章讲解) 1.难度高,安装困难 2.自己解决依赖关系(暂时不说) 新技术:RP ...
- Big Data(四)关于Hadoop的HA&CAP理论详解
问题 思路: 主从集群:结构相对简单,主与从协作 主:单点,数据一致好掌握 问题: 单点故障,集群整体不可用 压力过大,内存受限 解决方案 单点故障: 高可用方案:HA(High Available) ...
- psu补丁
1.查看命令 su - oracle opatch lspatches su - grid opatch lspatches
- springboot 配置quart多数据源
Springboot版本为2.1.6 多数据源配置使用druid进行配置,数据库使用的为Oracle11g,如果使用的是MySQL,直接将数据库的地址和驱动改一下即可 <parent> & ...
- Mac SIP系统完整性保护如何关闭
方法/步骤1: 打开Mac终端输入命令:csrutil status 它会显示关闭的话是disable,开启的话是enabled.默认情况下是开启的所以要关闭. 方法/步骤2: 点击桌面的apple ...
- layui 中的$符号有可以和jquery冲突,var & = layui.$
在项目上使用到了滚动条插件,但是使用var & = layui.$,会影响到插件. 错误提示: Uncaught TypeError: $(...).perfectScrollbar is n ...
- ubuntu下,VSCode采用cmake编译C++工程
首先在VSCode中下载CMake和CMake Tools两个插件. 选中CMake Tools,可以看到在VSCode中如何使用cmake编译C++工程的教程. 官网教程 最重要且最实用,看这个网址 ...
- Anaconda是如何进行版本管理的?
创建不同的environments,在电脑中会有不同的文件夹 然后,当使用conda下载时,会下载到不同的env文件夹下(提前进行env切换) 那么不是在anaconda prompt命令行下下载的呢 ...
- jQuery_完成表格的隔行换色
表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> ...