在用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']可以省略,

当插件跟页面中的动画或过渡等事件有冲突是,

可以尝试其他选项

['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. NET LOCALGROUP命令详解(将用户添加到管理员组等)

    NET LOCALGROUP [groupname [/COMMENT:"text"]] [/DOMAIN] groupname {/ADD [/COMMENT:"tex ...

  2. SpringBoot之外部Tomcat运行Spring Boot项目

    内置tomcat8.5.28 外置的要高于此版本才OK spring boot1.5是访问不了jsp页面的 以后要以2.0版本为主流的

  3. python的try...except

    try/except与其他语言相同,在python中,try/except语句主要是用于throw程序正常执行过程中出现的异常,如语法错(python作为脚本语言没有编译的环节,在执行过程中对语法进行 ...

  4. matlab之find()函数

    Find 这个函数用处也挺大的,这几天看很多程序都见到这一函数,今天要好好给阐述,了解下这个函数是为了找到矩阵或者是数组,向量中的非零元素.下面一大段英文没耐心看.看看例子就行了. 第一个用法是 nd ...

  5. html5+CSS3实现的炫酷超链接特效

    今天为大家介绍一个非常炫酷的超链接特效.在你做一些前端的网页时可以在里面去用上这些前卫时尚的效果. 这些超链接特性,大都是借助伪元素.svg.HTML5动画来实现的.效果都很漂亮,不信看下面. 用你的 ...

  6. ffmpeg截取视频

    ffmpeg -i ./suen071520.mp4 -vcodec copy -acodec copy -ss 00:55:00 -to 01:14:50 ./suen071520sp3.mp4-- ...

  7. hdu 6109 数据分割

    /** * 题目描述有点坑,勉强能读懂,大致意思,有多组约束条件.原本每组数据之间是有分界符号的 * 现在分界符号没了,让你找出原来每组数据多少个条件,并且告诉,每组的最后一个条件会使得与前面的 * ...

  8. python二进制数据

    一直以来对python的二进制数据搞不清楚. 一.二进制显示格式与实际存储值区别 1.二进制数据在python中以字节(bytes)类型和字节数组类型(bytearray)保存着,前者数据固定,后者不 ...

  9. jQuery bootstrap框架下重置下拉框选择

    前端页面中下拉选择框采用bootstrap-select美化,如下图:

  10. bzoj 1954 & poj 3764 The xor-longest Path dfs+Trie

    题目大意 给定一棵n个点的带权树,求树上最长的异或和路径 题解 因为\(xor\)操作满足可结合性,所以有 \(a\text{ }xor\text{ }b\text{ }xor\text{ }b = ...