浅谈vue中使用图片懒加载vue-lazyload插件详细指南


Posted in Javascript onOctober 23, 2017

在vue中使用图片懒加载详细指南分享给大家。具体如下:

说明

当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点。

使用方式

使用vue的 vue-lazyload 插件

插件地址:https://www.npmjs.com/package/vue-lazyload

案例

demo: 懒加载案例demo

Installation 安装方式

npm

$ npm i vue-lazyload -D

CDN

CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
 Vue.use(VueLazyload)
 ...
</script>

用法

main.js 在入口文件

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload' //引入这个懒加载插件

Vue.use(VueLazyload)

// 或者添加VueLazyload 选项
Vue.use(VueLazyload, {
 preLoad: 1.3,
 error: 'dist/error.png',
 loading: 'dist/loading.gif',
 attempt: 1
})

new Vue({
 el: 'body',
 components: {
  App
 }
})

在入口文件添加后,在组件任何地方都可以直接使用把 img 里的:src -> v-lazy

<div class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img :src="'/static/img/' + item.productImage" alt=""></a>
</div>

把之前项目中img 标签里面的 :src 属性 改成 v-lazy 

<div class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img v-lazy="'/static/img/' + item.productImage" alt=""></a>
</div>

参数选项说明

key description default options
preLoad proportion of pre-loading height 1.3 Number
error 当加载图片失败的时候 'data-src' String
loading 当加载图片成功的时候 'data-src' String
attempt 尝试计数 3 Number
listenEvents 想要监听的事件 ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] Desired Listen Events
adapter 动态修改元素属性 { } Element Adapter
filter 图片监听或过滤器 { } Image listener filter
lazyComponent lazyload component false Lazy Component
dispatchEvent 触发dom事件 false Boolean
throttleWait throttle wait 200 Number
observer use IntersectionObserver false Boolean
observerOptions IntersectionObserver options { rootMargin: '0px', threshold: 0.1 } IntersectionObserver

想要监听的事件

您可以通过传递数组来配置想要使用vue - lazyload的事件

监听器的名字。

Vue.use(VueLazyload, {
 preLoad: 1.3,
 error: 'dist/error.png',
 loading: 'dist/loading.gif',
 attempt: 1,
 // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
 listenEvents: [ 'scroll' ]
})

如果您遇到这个插件重新设置加载的麻烦,这是很有用的

当你有某些动画和过渡的时候。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
childNodes.length与children.length的区别
May 14 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
angularjs实现猜大小功能
Oct 23 #Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 #Javascript
angularjs实现天气预报功能
Jun 16 #Javascript
angular.js实现购物车功能
Oct 23 #Javascript
使用store来优化React组件的方法
Oct 23 #Javascript
node文件批量重命名的方法示例
Oct 23 #Javascript
详解vue 实例方法和数据
Oct 23 #Javascript
You might like
一个程序下载的管理程序(三)
2006/10/09 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
Fiddler如何抓取手机APP数据包
2016/01/22 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
wxPython色环电阻计算器
2019/11/18 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
新闻记者个人求职的自我评价
2013/11/28 职场文书
《画》教学反思
2014/04/14 职场文书
合同意向书范本
2014/07/30 职场文书
班主任经验交流材料
2014/12/16 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
Python中文纠错的简单实现
2021/07/07 Python