vue 实现图片懒加载功能


Posted in Vue.js onDecember 31, 2020

一个页面图片比较多的时候,需要对界面的图片进行懒加载处理,今天遇到了,做个懒加载的笔记。

1,需要安装vue的懒加载插件。

npm install vue-lazyload --save-dev

2,需要在main.js里面进行引用。

import VueLazyload from "vue-lazyload";

Vue.use(VueLazyload);

或者自定义

Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})

3,修改图片的路径,设置为懒加载的形式,将src改成v-lazy

<img v-lazy="psdimg" class="psd" />

     今天踩过的坑总结。

     当遇到是v-for循环的时候,或者用div包裹着img的时候,需要在div上面添加v-lazy-container="{ selector: 'img' }"

<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>
 
或者这种:

 <div>
v-lazy-container="{ selector: 'img' }"
class="contentDiv construction"
v-html="content">
</div>

以及我将html里面的图片路径拿到后,转换成懒加载的时候,

vue 实现图片懒加载功能

一定是 data-src,而不是v-lazy,要不然在接口获取的时候,拿到了图片地址,但是会一直显示不出来的。

以上就是vue 实现图片懒加载功能的详细内容,更多关于vue 图片懒加载的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
vue 动态创建组件的两种方法
Dec 31 #Vue.js
Vue 修改网站图标的方法
Dec 31 #Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 #Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 #Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 #Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 #Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 #Vue.js
You might like
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
学校安全检查制度
2014/01/27 职场文书
法学个人求职信范文
2014/01/27 职场文书
学生期末评语大全
2014/04/30 职场文书
热情服务标语
2014/10/07 职场文书
逃课检讨书
2015/01/26 职场文书
2016年寒假见闻
2015/10/10 职场文书