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 相关文章推荐
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 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获取当前页面完整URL的实现代码
2013/06/10 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
python3.0 字典key排序
2008/12/24 Python
Python实现截屏的函数
2015/07/26 Python
Python出现segfault错误解决方法
2016/04/16 Python
Python使用剪切板的方法
2017/06/06 Python
Python之str操作方法(详解)
2017/06/19 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
房地产营销策划方案
2014/02/08 职场文书
项目施工员岗位职责
2014/03/09 职场文书
团队激励口号
2014/06/06 职场文书
2014年教研工作总结
2014/12/06 职场文书
七一慰问简报
2015/07/20 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
如何利用React实现图片识别App
2022/02/18 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js