VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)
在用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. 安装插件:
- npm install vue-lazyload --save-dev //开发环境安装
- 2 npm install vue-lazyload -S //开发环境安装
2. main.js引入插件:
- import VueLazyLoad from 'vue-lazyload'
- Vue.use(VueLazyLoad,{
- error:require('./statics/site/imgs/erro.jpg'),
- loading:require('./statics/site/imgs/load.gif')
- })
3. vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
- <div class="img-box">
- <img v-lazy =subitem.img_url>
- </div>
4.我需要在webpack.config.dev.js配置文件中配置一下
- module: {
- rules: [{
- test: /\.vue$/,
- use: ['vue-loader']
- },
- {
- test: /\.css$/,
- use: ['style-loader', 'css-loader']
- },
- {
- test: /\.(ttf|eot|woff|svg|jpg|png|gif)$/,
- use: [{
- loader: 'url-loader'
- }]
- }
- ]
- },
四.功能扩展:
图片懒加载的简单效果已经实现了,然后就可以按这开发文档的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']可以省略, 当插件跟页面中的动画或过渡等事件有冲突是, 可以尝试其他选项 |
|
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插件的简单上手使用(优化版本)的更多相关文章
- Vue图片懒加载之lazyload插件使用
当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...
- VUE图片懒加载-vue lazyload插件的简单使用
序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...
- Vue图片懒加载插件
图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...
- Vue图片懒加载
图片懒加载的原理 先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src).当js监听到该图片元素进入可视窗口时,即将自定义属性 ...
- vue 图片懒加载 vue-lazyload
图片懒加载 在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽. ...
- vue-lazyload 的使用(vue图片懒加载)
github地址:https://github.com/hilongjw/vue-lazyload npm i vue-lazyload -S 或者 <script src="http ...
- Zepto picLazyLoad Plugin,图片懒加载的Zepto插件
嗯,学着国外人起名字Zepto picLazyLoad Plugin确实看起来高大上,其实js代码没几句,而且我每次写js都捉襟见肘,泪奔--- 图片懒加载有很多js插件,非常著名的属jQuery的L ...
- 带加载进度的Web图片懒加载组件Lazyload
在Web项目中,大量的图片应用会导致页面加载时间过长,浪费不必要的带宽成本,还会影响用户浏览体验. Lazyload 是一个文件大小仅4kb的图片懒加载组件(不依赖其它第三方库),组件会根据用户当前浏 ...
- js 函数的多图片懒加载(lazy) 带插件版完整解析
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片懒加载效果 页面需求 1 ...
随机推荐
- ubuntu14开发环境配置
1 配置JDK1.8 jdk工具从官网下载,我下载到了~/tool目录下,首先进入用户的bash配置目录,打开配置文件: cd ~ vi .bashrc 编辑.bashrc文件,在适当位置或者文件最后 ...
- MIS系统中的报表测试
报表功能的基本要求,就是通过查询/统计/分析,提供用户所需的准确的数据.如果无法实现这个基本功能,则报表完全失去意义. 对于用户来说,报表可以直接影响到他们的决策,例如可能因为报表对销售和库存情况反映 ...
- 发挥到极致的Asterisk SS7 解决方案【转】
基于SS7的开源解决方案在国内已经安装了很多.很多用户都使用chan_ss7 开源协议栈作为呼叫中心,400电话,计费结算的系统.随着国内对开源Asterisk的认可程度越来越高. Asterisk让 ...
- Linux下的Tomcat JVM 调优
1. 适用场景 Tomcat 运行过程遇到Caused by: java.lang.OutOfMemoryError: PermGen space或者java.lang.OutOfMemoryErro ...
- 「UVA11181」 Probability|Given(概率
题意翻译 有n个人要去买东西,他们去买东西的概率为p[i]. 现在得知有r个人买了东西,在这种条件下,求每个人买东西的概率. 感谢@s_r_f 提供翻译 题目描述 PDF 输入输出格式 输入格式: 输 ...
- mac内置的FTP工具
在 Mac OS X 系统下,有不少优秀的 FTP 工具,如 Cyberduck.Transmit,但是你是否知道除了这些第三方应用,系统已经为你准备好了一个内置的 FTP 工具?/ M: e0 J% ...
- Jenkins安装和配置FindBugs、PMD、CheckStyle等插件
最近研究Jenkins的常用插件的使用,主要使用FindBugs.PMD.CheckStyle.Violations.Emma等插件,主要参考了http://blog.csdn.net/dc_726/ ...
- mysql5.1的编译安装 ----针对第一次安装mysql的
由于是第一次安装,不能确定你是否有安装编译和mysql所要依赖的插件,使用我是当做你最原始的安装环境. 1.安装mysql5.1的依赖包 yum install -y gcc gcc-c++ aut ...
- DCloud-HTML5+:5+ App开发入门指南
ylbtech-DCloud-HTML5+:5+ App开发入门指南 1.返回顶部 1. 5+ App开发入门指南 App App入门 HTML5 Plus应用概述 HTML5 Plus移动App,简 ...
- DataTable批量插入数据库
最近在将excel中的文件导入到数据库中,用程序进行编写,由于数据量较大所以速度很慢,后来采用了SqlBulkCopy类,解决了速度的问题,我就insert语句,sqldataadapter.upda ...