在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是有些地方又与我的项目有些不同,故此记录一下下~实在是超级简单的

先展示效果:

一. vue lazyload插件:

插件地址:https://github.com/hilongjw/vue-lazyload

demo:http://hilongjw.github.io/vue-lazyload/

二. 简单使用实例:

当第一次看官网时,相信大多数人想要快速使用某个功能,追求开发速率,故不可能花费大量时间研究官方文档,所以写一些步骤在下方,会一直顺利应用到项目中。

使用非常简单

1. 安装插件:

  1. npm install vue-lazyload --save-dev //开发环境安装
  1. 2 npm install vue-lazyload -S //开发环境安装

2. main.js引入插件:

  1. import VueLazyLoad from 'vue-lazyload'
  2. Vue.use(VueLazyLoad,{
  3. error:require('./statics/site/imgs/erro.jpg'),
  4. loading:require('./statics/site/imgs/load.gif')
  5. })

3. vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy

  1. <div class="img-box">
  2.   <img v-lazy =subitem.img_url>
  3. </div>

4.我需要在webpack.config.dev.js配置文件中配置一下

  1. module: {
  2. rules: [{
  3. test: /\.vue$/,
  4. use: ['vue-loader']
  5. },
  6. {
  7. test: /\.css$/,
  8. use: ['style-loader', 'css-loader']
  9. },
  10. {
  11. test: /\.(ttf|eot|woff|svg|jpg|png|gif)$/,
  12. use: [{
  13. loader: 'url-loader'
  14. }]
  15. }
  16. ]
  17. },

四.功能扩展:

图片懒加载的简单效果已经实现了,然后就可以按这开发文档的api进行扩展了:

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

VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)的更多相关文章

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

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

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

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

  3. Vue图片懒加载插件

    图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...

  4. Vue图片懒加载

    图片懒加载的原理 先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src).当js监听到该图片元素进入可视窗口时,即将自定义属性 ...

  5. vue 图片懒加载 vue-lazyload

    图片懒加载 在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽. ...

  6. vue-lazyload 的使用(vue图片懒加载)

    github地址:https://github.com/hilongjw/vue-lazyload npm i vue-lazyload -S 或者 <script src="http ...

  7. Zepto picLazyLoad Plugin,图片懒加载的Zepto插件

    嗯,学着国外人起名字Zepto picLazyLoad Plugin确实看起来高大上,其实js代码没几句,而且我每次写js都捉襟见肘,泪奔--- 图片懒加载有很多js插件,非常著名的属jQuery的L ...

  8. 带加载进度的Web图片懒加载组件Lazyload

    在Web项目中,大量的图片应用会导致页面加载时间过长,浪费不必要的带宽成本,还会影响用户浏览体验. Lazyload 是一个文件大小仅4kb的图片懒加载组件(不依赖其它第三方库),组件会根据用户当前浏 ...

  9. js 函数的多图片懒加载(lazy) 带插件版完整解析

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片懒加载效果 页面需求 1 ...

随机推荐

  1. ubuntu14开发环境配置

    1 配置JDK1.8 jdk工具从官网下载,我下载到了~/tool目录下,首先进入用户的bash配置目录,打开配置文件: cd ~ vi .bashrc 编辑.bashrc文件,在适当位置或者文件最后 ...

  2. MIS系统中的报表测试

    报表功能的基本要求,就是通过查询/统计/分析,提供用户所需的准确的数据.如果无法实现这个基本功能,则报表完全失去意义. 对于用户来说,报表可以直接影响到他们的决策,例如可能因为报表对销售和库存情况反映 ...

  3. 发挥到极致的Asterisk SS7 解决方案【转】

    基于SS7的开源解决方案在国内已经安装了很多.很多用户都使用chan_ss7 开源协议栈作为呼叫中心,400电话,计费结算的系统.随着国内对开源Asterisk的认可程度越来越高. Asterisk让 ...

  4. Linux下的Tomcat JVM 调优

    1. 适用场景 Tomcat 运行过程遇到Caused by: java.lang.OutOfMemoryError: PermGen space或者java.lang.OutOfMemoryErro ...

  5. 「UVA11181」 Probability|Given(概率

    题意翻译 有n个人要去买东西,他们去买东西的概率为p[i]. 现在得知有r个人买了东西,在这种条件下,求每个人买东西的概率. 感谢@s_r_f 提供翻译 题目描述 PDF 输入输出格式 输入格式: 输 ...

  6. mac内置的FTP工具

    在 Mac OS X 系统下,有不少优秀的 FTP 工具,如 Cyberduck.Transmit,但是你是否知道除了这些第三方应用,系统已经为你准备好了一个内置的 FTP 工具?/ M: e0 J% ...

  7. Jenkins安装和配置FindBugs、PMD、CheckStyle等插件

    最近研究Jenkins的常用插件的使用,主要使用FindBugs.PMD.CheckStyle.Violations.Emma等插件,主要参考了http://blog.csdn.net/dc_726/ ...

  8. mysql5.1的编译安装 ----针对第一次安装mysql的

    由于是第一次安装,不能确定你是否有安装编译和mysql所要依赖的插件,使用我是当做你最原始的安装环境.  1.安装mysql5.1的依赖包 yum install -y gcc gcc-c++ aut ...

  9. DCloud-HTML5+:5+ App开发入门指南

    ylbtech-DCloud-HTML5+:5+ App开发入门指南 1.返回顶部 1. 5+ App开发入门指南 App App入门 HTML5 Plus应用概述 HTML5 Plus移动App,简 ...

  10. DataTable批量插入数据库

    最近在将excel中的文件导入到数据库中,用程序进行编写,由于数据量较大所以速度很慢,后来采用了SqlBulkCopy类,解决了速度的问题,我就insert语句,sqldataadapter.upda ...