更详细的内容,请移步

使用


npm install vue-lazyload --save //注册插件
import vueLazyload from 'vue-lazyload'
Vue.use(vueLazyload); //在需要懒加载的图片上
<img v-lazy="imgUrl">

参数说明

注册插件的时候,是可以传入第二个配置参数的


Vue.use(vueLazyload,{})

可选的参数如下:
preLoad:类型Number,默认1.3. 表示lazyload的元素距离页面底部距离的百分比.计算值为(preload - 1).
attempt:图片加载失败后的重试次数.默认为3.
error:类型string.图片加载失败后的显示的失败图片路径.
loading:类型string.图片正在加载中显示的loading图片的路径.
listenEvents:类型array.默认['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'].即是在监听上述事件中,判断图片是否在preload的位置.如果你不想在那么多事件中判断,可以指定一个或者几个.例如如果你给这个属性只指定['touchmove'].那么scroll 屏幕不会加载图片,只有手指滑动屏幕才会加载图片.

adapter:注册img 的loading,loaded,error三个状态的回调函数,参数会暴露懒加载的img元素,可以对其进行操作.
filter: img未加载之前,解析到src 的时候注册的回调函数.可以在加载图片之前,对src进行修改.注册在filter下的所有的函数都会执行
lazyComponent:类型Boolean.是否启用懒加载组件.<lazy-component>组件中的内容只有在出现在preload的位置中才会加载组件.这个lazyloadComponent 组件有个缺点就是,组件在加载前是什么都不渲染的,这样子的话,有可能会影响布局,以及加载前到加载后的切换不好,有点突兀和生硬.挖坑(vue懒加载组件)

observer:是否启用IntersectionObserver,这个api有兼容问题
observerOptions:默认{ rootMargin: '0px', threshold: 0.1 } 主要是我对这个pai不熟,按照vue-lazyload的说法是开启之后,对很多节点的情况会优化性能.挖坑吧

还可以通过监听vue-lazyload组件的loaded事件来查看资源加载的时间

原文地址:https://segmentfault.com/a/1190000012865122

vue-lazyload插件的更多相关文章

  1. VUE图片懒加载-vue lazyload插件的简单使用

    序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...

  2. VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)

    在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...

  3. Vue图片懒加载之lazyload插件使用

    当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...

  4. 【vue lazyload】插件的使用步骤

    VUE图片懒加载-vue lazyload插件的简单使用

  5. vue 中使用 lazyload 插件 数据更图片不更新 的原因 及解决方案

    在使用lazyload插件的img标签上,加上:key标识即可

  6. 关于lazyload插件的一些笔记

    Lazy Load Plugin for jQuery 需要引入 jQuery,兼容各种 IE,适合 PC 端使用.详细 API 可以参考 http://www.appelsiini.net/proj ...

  7. jQuery lazyload插件详解和问题解答

    lazyload插件用于图片延迟加载,节省服务器带宽,减少服务器请求次数,提高网站的页面加载速度,用于网站性能优化,只有当图片在窗口可视范围内时才向服务器请求: 参数: threshold:设置距离窗 ...

  8. 写一个Vue loading 插件

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...

  9. Vue自定义插件方法大全

    新年第一天首先祝大家新年快乐,心想事成! 1.利用根实例构造函数的原型 //在构造函数的原型链上添加自定义属性 Vue.prototype.test = 'pomelo' //在其他组件中调用 con ...

  10. vue各种插件汇总

    https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...

随机推荐

  1. BZOJ3529: [Sdoi2014]数表 莫比乌斯反演_树状数组

    Code: #include <cstdio> #include <algorithm> #include <cstring> #define ll long lo ...

  2. CF1012B Chemical table 构造_思维_并查集

    我们可以将横坐标和纵坐标看成是点.发现这些点之间是有传递性的. 题中说明,如果有矩阵中三个顶点被选,则底角的点也会被覆盖,发现这些点之间是有传递性的.那么我们最终达到的目的就是使整个图中只有 111 ...

  3. sklearn学习3----模型选择和评估(1)训练集和测试集的切分

    来自链接:https://blog.csdn.net/zahuopuboss/article/details/54948181 1.sklearn.model_selection.train_test ...

  4. CGI与ISAPI的区别(转)

    一 CGI原理及其性能 1) CGI概念CGI即通用网关接口(Common Gateway Interface),它是一段程序,运行在服务器上,提供同客户端HTML页面的交互,通俗的讲CGI就象是一座 ...

  5. [CodeForces]1006F Xor Path

    双向搜索. 水div3的时候最后一道题由于C题死活看不懂题 来不及做F了Orz.. 因为n,m是20,双向搜索一下,求个到中间的Xor值的方案,统计一下即可. 时间复杂度\(O(2^{21})\) 好 ...

  6. JavaScript 实现留言框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. LoadRunner监控Window/Unix系统资源的配置

    LoadRunner监控Window/Unix系统资源需要做两件事情: 1.配置被监视的服务器,以便于LoadRunner能够获取系统资源使用情况的数据 2.在LoadRunner的Controlle ...

  8. 修改UTC时间

    /sbin/hwclock --systohc date按照时间修正.

  9. Eclipse配置Maven私服

    Eclipse配置Maven私服 前言: 搭建Maven私有仓库的主要目的,是为了在团队多人开发时,只要内网的私有仓库有下载过依赖的jar包,就直接从私有仓库获取,不再通过外网的中央仓库.如果私服上面 ...

  10. ZOJ 3556

    终于做出来了,激动.... 这道题隐藏得深啊,但若推导下来,就变简单了. 首先,一个集合的子集的个数为2^n=s.注意了,题目求的是有序集合组,并且每个集合是可以重复使用的,怎么办呢?这就要想到多重集 ...