MyBoard Lazyloading

board.vue

// etc.

<div :class="[imageLoaded ? 'loaded-once' : '' ,'fade-in-lazyloading absolute w-full h-full left-0 top-0 bg-center bg-cover']" v-lazy:background-image="imageOptions"></div>

// etc.

<script>
// etc.

data () {
        return {
            imageLoaded: false,
            imageOptions: {
                throttleWait: 200,
                src: this.board.background.thumb
            }
        }
    },

    mounted () {
        this.$Lazyload.$once('loaded', ({el, src}) => {
            setTimeout(() => {
                this.imageLoaded = true
            }, 1000)
        })
    }

// etc.
</script>


<style>
// etc.
[lazy='loaded']:not(.loaded-once) {
    opacity: 0;
    animation-name: fadein;
    animation-duration: .3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-timing-function: ease-out;
}

.fade-in-lazyloading[lazy='loaded'] {
    animation-delay: 0.5s;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.ghost [lazy='loaded'],
.v-move [lazy='loaded'],
.sortable-chosen [lazy='loaded'] {
    opacity: 1 !important;
    animation: unset !important;
    animation-delay: unset !important;
}
// etc.
</style>

package.json

{
  "private": true,
  "scripts": {
    "development": "php artisan ziggy:generate \"resources/js/Utils/App/ziggy.js\" & mix",
    "dev": "php artisan ziggy:generate \"resources/js/Utils/App/ziggy.js\" & mix",
    "watch": "php artisan ziggy:generate \"resources/js/Utils/App/ziggy.js\" & mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "php artisan ziggy:generate \"resources/js/Utils/App/ziggy.js\" & mix --production",
    "prod": "php artisan ziggy:generate \"resources/js/Utils/App/ziggy.js\" & mix --production"
  },
  "devDependencies": {
    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.13.12",
    "@mertasan/tailwindcss-variables": "^1.1.1",
    "axios": "^0.21.1",
    "chokidar": "^3.5.1",
    "cross-env": "^7.0.3",
    "eslint": "^7.17.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-pretty-imports": "^1.1.3",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-vue": "^7.4.1",
    "laravel-mix": "^6.0.25",
    "laravel-mix-tailwind": "^0.1.1",
    "lodash": "^4.17.19",
    "postcss": "^8.3.5",
    "postcss-nested": "^5.0.5",
    "postcss-strip-inline-comments": "^0.1.5",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.32.2",
    "sass-loader": "^8.0.2",
    "tailwindcss": "^2.2.0",
    "tailwindcss-scrims": "^1.0.0",
    "vue-loader": "^15.9.6",
    "vue-masonry-css": "^1.0.3",
    "vue-meta": "^2.3.1",
    "vue-template-compiler": "^2.6.10"
  },
  "dependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@inertiajs/inertia": "^0.9.2",
    "@inertiajs/inertia-vue": "^0.6.2",
    "@inertiajs/progress": "^0.2.5",
    "@popperjs/core": "^2.6.0",
    "@spatie/media-library-pro-vue2": "^1.1.14",
    "@spatie/media-library-pro-vue2-attachment": "^1.1.14",
    "@spatie/media-library-pro-vue2-collection": "^1.1.15",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/typography": "^0.4.0",
    "@web-auth/webauthn-helper": "^0.0.13",
    "agentkeepalive": "^4.1.4",
    "autoprefixer": "^10.2.0",
    "gmap-vue": "^1.5.0",
    "js-cookie": "^2.2.1",
    "moment": "^2.29.1",
    "nprogress": "^0.2.0",
    "packery": "^2.1.2",
    "plyr": "^3.6.4",
    "popper.js": "^1.16.1",
    "postcss-import": "^14.0.1",
    "puppeteer": "^10.1.0",
    "tailwindcss-aspect-ratio": "^3.0.0",
    "v-tooltip": "^2.1.2",
    "vue": "^2.6.12",
    "vue-clickaway": "^2.2.2",
    "vue-cookie": "^1.1.4",
    "vue-cool-lightbox": "^2.7.1",
    "vue-lazyload": "^1.3.3",
    "vue-plyr": "^7.0.0",
    "vue-social-sharing": "^3.0.8",
    "vue-toast-notification": "^0.6.0",
    "vue2-smooth-scroll": "^1.5.0",
    "vuedraggable": "^2.24.3",
    "ziggy-js": "^1.0.4"
  }
}