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 ...
随机推荐
- NET LOCALGROUP命令详解(将用户添加到管理员组等)
NET LOCALGROUP [groupname [/COMMENT:"text"]] [/DOMAIN] groupname {/ADD [/COMMENT:"tex ...
- SpringBoot之外部Tomcat运行Spring Boot项目
内置tomcat8.5.28 外置的要高于此版本才OK spring boot1.5是访问不了jsp页面的 以后要以2.0版本为主流的
- python的try...except
try/except与其他语言相同,在python中,try/except语句主要是用于throw程序正常执行过程中出现的异常,如语法错(python作为脚本语言没有编译的环节,在执行过程中对语法进行 ...
- matlab之find()函数
Find 这个函数用处也挺大的,这几天看很多程序都见到这一函数,今天要好好给阐述,了解下这个函数是为了找到矩阵或者是数组,向量中的非零元素.下面一大段英文没耐心看.看看例子就行了. 第一个用法是 nd ...
- html5+CSS3实现的炫酷超链接特效
今天为大家介绍一个非常炫酷的超链接特效.在你做一些前端的网页时可以在里面去用上这些前卫时尚的效果. 这些超链接特性,大都是借助伪元素.svg.HTML5动画来实现的.效果都很漂亮,不信看下面. 用你的 ...
- ffmpeg截取视频
ffmpeg -i ./suen071520.mp4 -vcodec copy -acodec copy -ss 00:55:00 -to 01:14:50 ./suen071520sp3.mp4-- ...
- hdu 6109 数据分割
/** * 题目描述有点坑,勉强能读懂,大致意思,有多组约束条件.原本每组数据之间是有分界符号的 * 现在分界符号没了,让你找出原来每组数据多少个条件,并且告诉,每组的最后一个条件会使得与前面的 * ...
- python二进制数据
一直以来对python的二进制数据搞不清楚. 一.二进制显示格式与实际存储值区别 1.二进制数据在python中以字节(bytes)类型和字节数组类型(bytearray)保存着,前者数据固定,后者不 ...
- jQuery bootstrap框架下重置下拉框选择
前端页面中下拉选择框采用bootstrap-select美化,如下图:
- bzoj 1954 & poj 3764 The xor-longest Path dfs+Trie
题目大意 给定一棵n个点的带权树,求树上最长的异或和路径 题解 因为\(xor\)操作满足可结合性,所以有 \(a\text{ }xor\text{ }b\text{ }xor\text{ }b = ...