在用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 //开发环境安装
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']可以省略, 当插件跟页面中的动画或过渡等事件有冲突是, 可以尝试其他选项 |
| 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 |