Vue Lazyload Scrolling
HTML
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script src="https://unpkg.com/vue"></script>
<div id="app"></div>
CSS
img {
display: block;
width: 400px;
height: 500px;
}
JavaScript
Vue.use(VueLazyload, {
preLoad: 2,
})
new Vue({
el: '#app',
data: {
images: [],
},
created() {
for (let i = 0; i < 40; i++) {
this.images.push('https://picsum.photos/400/500/?image=' + i)
}
},
template: `
<div>
<img v-for="src in images" v-lazy="src" :key="src">
test
</div>`,
})