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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue使用element-ui按需引入
May 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查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
详解VUE 数组更新
2017/12/16 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
js实现星星打分效果
2020/07/05 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
Python完全新手教程
2007/02/08 Python
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
党员创先争优活动总结
2014/05/04 职场文书
春节超市活动方案
2014/08/14 职场文书
助学感谢信范文
2015/01/21 职场文书
办公室卫生管理制度
2015/08/04 职场文书
高中政治教师教学反思
2016/02/23 职场文书
用Python selenium实现淘宝抢单机器人
2021/06/18 Python