在Vue/Laravel中延迟加载图像

npm install vue-lazyload

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

<img v-lazy="imageURL" alt="Image">

npm install laravel-mix

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .options({
       processCssUrls: false
   });

data() {
    return {
        imageURL: 'path/to/image.jpg'
    }
}

<img :src="imageURL" alt="Image" ref="image">

<script>
    export default {
        mounted() {
            const options = {
                root: null,
                rootMargin: '0px',
                threshold: 0.1
            };

            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        this.$refs.image.src = this.imageURL;
                        observer.unobserve(entry.target);
                    }
                });
            }, options);

            observer.observe(this.$refs.image);
        }
    }
</script>