Welcome to vue-better-lazyload 👋

A Vue.js plugin for lazyload your Image , Component or anything in your application

Prerequisites

• node >=6.0.0

Install

npm install vue-better-lazyload
// or
yarn add vue-better-lazyload

Usage

// main.js
import Vue from "vue";
import App from "./App.vue";
import Lazyload from "vue-better-lazyload";
import Loading from "./components/loading.vue";
import Error from "./components/error.vue";

Vue.use(Lazyload, { loading: Loading, error: Error });

new Vue({
  el: "#app",
  render: h => h(App)
});

<!-- lazy loading img -->
<template>
    <VLazyload :style="{width:'100%',height:'400px'}" class="lazy-img-fadein">
      <img :src="src"
          @error="errorHandler">
    </VLazyload>
</template>

<!-- lazy loading component -->
<template>
    <VLazyload :style="{width:'100%',height:'400px'}" class="lazy-img-fadein">
      <GoodList></GoodList>
    </VLazyload>
</template>
<script>
export default {
  components:{
    GoodList:()=>@import("@/components/GoodList")
  }
}
</script>

Author

👤 wangxiang [email protected]

• Website: https://wenxi.tech/
• Twitter: @wenxi103
• Github: @wolfstark

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2021 wangxiang [email protected].
This project is MIT licensed.

---

This README was generated with ❤️ by readme-md-generator