用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 - ...
随机推荐
- 清除windows 远程桌面访问记录 批处理
直接上码供参考 @echo OFF color 0a Title Clear Windows Recent Mode con cols=109 lines=30 :START ECHO. Echo = ...
- laravel-admin后台框架基本使用
建立控制器 在app/Admin/Controllers新建对应的控制器来管理某个数据表.控制器例子: <?php namespace App\Admin\Controllers; use En ...
- PAT Advanced 1033 To Fill or Not to Fill (25 分)
With highways available, driving a car from Hangzhou to any other city is easy. But since the tank c ...
- Django学习系列8:django测试客户端
"""向浏览器返回真正的HTML响应,添加一个新的测试方法""" from django.test import TestCase from ...
- MySQL 表的增删查改
一.插入数据 1. INSERT ... VALUES ... INSERT INTO <表名> [ <列名1> [ , … <列名n>] ] VALUES (值1 ...
- git初始化命令行指引
Git 全局设置 git config --global user.name "陈耿聪" git config --global user.email "swain@di ...
- AI应该享有与动物一样的权利吗?
全世界的大学都在进行人工智能(AI)的重大研究,艾伦研究所(Allen Institute)等组织以及Google和Facebook等高科技公司.可能的结果是,我们很快将拥有与小鼠或狗一样高的认知能力 ...
- 《Head First 软件开发》阅读一
伟大的软件开发:让客户满意. 大多数项目的焦点:钱.时间. 我们需要交付的软件系统是需要客户满意,而你认为的完成并不是客户认为的完成. 如果我们不能确定客户需要的是什么,得回去问问他们.这是执行一个项 ...
- Java设计模式:23种设计模式全面解析(超级详细)
设计模式(Design Pattern)是前辈们对代码开发经验的总结,是解决特定问题的一系列套路.它不是语法规定,而是一套用来提高代码可复用性.可维护性.可读性.稳健性以及安全性的解决方案. 1995 ...
- python Tkinter 编程
Tkinter 是 Python 的标准 GUI 库.Python 使用 Tkinter 可以快速的创建 GUI 应用程序. 由于 Tkinter 是内置到 python 的安装包中.只要安装好 Py ...