vue实现图片懒加载的方法分析


Posted in Javascript onFebruary 05, 2020

本文实例讲述了vue实现图片懒加载的方法。分享给大家供大家参考,具体如下:

vue图片懒加载使用

首先第一步,安装插件

vue-lazyload

npm install vue-lazyload --save-dev

在man.js中引入插件

import VueLazyLoad from 'vue-lazyload'

使用

Vue.use(VueLazyLoad,{
error:'', //加载失败的图
loading:'' //加载中的默认图
})

这是一个最简单的配置

官方的详细扩展配置文档

key description default options
preLoad proportion of pre-loading height(预加载高度比例) 1.3 Number
error src of the image upon load fail(图片路径错误时加载图片) 'data-src' String
loading src of the image while loading(预加载图片) 'data-src' String
attempt attempts count(尝试加载图片数量) 3 Number
listenEvents events that you want vue listen for (想要监听的vue事件) 默认['scroll']可以省略, 当插件跟页面中的动画或过渡等事件有冲突是, 可以尝试其他选项 ['scroll'(默认), 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] Desired Listen Events
adapter dynamically modify the attribute of element (动态修改元素属性) { } Element Adapter
filter the image's listener filter(动态修改图片地址路径) { } Image listener filter
lazyComponent lazyload component false Lazy Component
dispatchEvent trigger the dom event false Boolean
throttleWait throttle wait 200 Number
observer use IntersectionObserver false Boolean
observerOptions IntersectionObserver options { rootMargin: '0px', threshold: 0.1 } IntersectionObserver  

实现懒加载,使用v-lazy代替src属性

<ul>
 <li v-for="img in list">
  <img v-lazy="img.src" >
 </li>
</ul>

对图片单独进行配置

方法1

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }"></div>

方法2

v-lazy='obj'   赋值一个对象

在data里面声明对象

可以设置三个属性 src  图片  loading加载状态下的图片  error错误状态下的图片

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 Javascript
Vue组件基础用法详解
Feb 05 #Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 #Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 #Javascript
Vuex的API文档说明详解
Feb 05 #Javascript
如何实现iframe父子传参通信
Feb 05 #Javascript
JavaScript对象原型链原理详解
Feb 05 #Javascript
基于Vue的侧边目录组件的实现
Feb 05 #Javascript
You might like
实用函数3
2007/11/08 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
跟老齐学Python之变量和参数
2014/10/10 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
2014年三八妇女节活动总结
2014/03/01 职场文书
欢迎领导检查标语
2014/06/27 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
旷工检讨书1000字
2015/01/01 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
Docker部署Mysql8的实现步骤
2022/07/07 Servers