Vue图片懒加载插件 - vue lazyload的简单使用
Vue module for lazyloading images in your applications. Some of goals of this project worth noting include:
- Be lightweight, powerful and easy to use
- Work on any image type
- Add loading class while image is loading
- Supports both of Vue 1.0 and Vue 2.0
github地址: https://github.com/hilongjw/vue-lazyload
-
下载依赖
npm install vue-lazyload --save
-
引入
import Vue from 'vue' import App from '@/App' import VueLazyload from 'vue-lazyload'
-
配置
Vue.use(VueLazyload, { error: 'dist/error.png', // 这个是请求失败后显示的图片 loading: 'dist/loading.gif', // 这个是加载的loading过渡效果 try: 2 // 这个是加载图片数量 })
-
组件使用
<template> <div class="lazyLoad"> <ul id="container"> <li v-for="img in arr"> <img v-lazy="img.thumbnail_pic_s"> </li> </ul> </div> </template> <script> export default({ name:"lazyLoad", data(){ return{ arr:[] } }, mounted:function(){ this.$http.get('/api/data').then(res=>{ this.arr=res.data.data; console.log(this.data) }) }, }) </script> <style scoped> li{ list-style: none } </style>
-
如果需求中是, 不同的组件中默认的loading图不同. 可如下配置
v-lazy:background-image="{src: item.src, error: 'http://domain.com/error.png', loading: 'http://domain.com/loading-spin.svg'}"
本文版权归作者和博客园共有,欢迎转载。但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利!
作者:刘呵呵
QQ:352887191