I am using vue-lazyload
Install
npm i vue-lazyloadSetup at index.js
import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)Usage
- Setup placeholder image via
:srcto avoid the plugin from hardcoding css width & height (which might not work with responsive image) - Consider set
loadingimage of the same size, to avoid image layout/size changes which might causes flickering or layout redraw. Sadly there is no way to disableloadingat the moment.
<template> <div> <div> <template v-for="(image, index) in images" > <template v-if="index >= 4"> <img v-lazy="{src: image, loading: loading, error: error}" :src="placeholder" :key="image" /> </template> <template v-else> <img :src="image" :key="image" /> </template> </template> </div> </div></template><script>export default { data() { return { images: [ 'https://picsum.photos/id/1/150/150', 'https://picsum.photos/id/2/150/150', 'https://picsum.photos/id/3/150/150', 'https://picsum.photos/id/4/150/150', 'https://picsum.photos/id/5/150/150', 'https://picsum.photos/id/6/150/150' ], placeholder: 'https://placehold.co/150x150', loading: 'https://placehold.co/150x150?text=loading', error: 'https://placehold.co/150x150?text=error', } }}</script>