Vue.js Lazy Loading Images From API in Grid View Using vue-lazyload Library Example in Javascript Full Project For Beginners

Vue.js Lazy Loading Images From API in Grid View Using vue-lazyload Library Example in Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be loading images in lazy load from api in grid view in vue.js using vue-lazyload library in javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make a new vue.js project and install the below library using the npm command as shown below

 

npm i vue-lazyload

 

After installing this library make an App.vue file and copy paste the below code to it

 

App.vue

 

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  mounted() {
    this.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
      console.log(el, src)
    })
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

See also  Vue.js Material Design Mini Song MP3 Music or Sound Player in Browser Using Javascript Full Project For Beginners

 

And now we will be editing the main.js file of the vue.js project as shown below

 

main.js

 

import Vue from "vue";
import App from "./App.vue";
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

 

 

Now make a components folder inside the root directory and inside it make a HelloWorld.vue file and copy paste the below code

 

HelloWorld.vue

 

<template>
  <div class="hello">
    <div v-lazy-container="{ selector: 'img' }">
      <img data-src="//placekitten.com/200/200">
      <img data-src="//placekitten.com/200/201">
      <img data-src="//placekitten.com/200/202">
      <img data-src="//placekitten.com/200/202">
      <img data-src="//placekitten.com/200/202">
      <img data-src="//placekitten.com/200/202">
      <img data-src="//placekitten.com/200/202">
      <img data-src="//placekitten.com/200/202">
      <img data-src="//placekitten.com/200/202">
      <img data-src="//placekitten.com/200/202">  
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>

 

See also  Vue.js Clipboard.js Example to Copy Text to Clipboard From Input Field or TextArea Widget on Button Click in Browser Using Javascript Full Project For Beginners

 

And in the code above we are fetching images from the api and then loading inside the img tags in a lazy load manner in grid view as shown below

 

Leave a Reply