vLazyImg

vLazyImg is a Vue directive to lazy load images with many options. The image will be loaded on user's scroll

Basic usage

<script lang="ts" setup>
import { vLazyImg } from 'maz-ui/directives'
</script>

<template>
  <img
    v-lazy-img="'https://placedog.net/1500/1000'"
    style="background-color: hsl(var(--maz-background-300)); width: 80%;"
    class="flex flex-center rounded"
  >
</template>

Use background image

Instead of v-lazy-img use v-lazy-img:bg-image

<template>
  <div
    v-lazy-img:bg-image="'https://placedog.net/1500/1000'"
    style="height: 200px; width: 100%; background-size: contain;"
    class="flex flex-center rounded"
  />
</template>

Options

Open the developer console to show logs

<script lang="ts" setup>
import { vLazyImg, vLazyImgBindingValue } from 'maz-ui/directives'
import { ref } from 'vue'

const lazyBinding: vLazyImgBindingValue = {
  src: 'https://placedog.net/1500/1000',
  baseClass: 'custom-class',
  loadingClass: 'custom-class-loading',
  loadedClass: 'custom-class-loaded',
  errorClass: 'custom-class-error',
  fallbackClass: 'custom-class-fallback',
  observerOnce: false, // launch onIntersecting function each times where the user scrolls on the image
  loadOnce: false,
  onLoading: (el: Element) => console.log('loading', el),
  onLoaded: (el: Element) => console.log('loaded', el),
  onError: (el: Element) => console.log('error', el),
  onIntersecting: (el: Element) => console.log('intersecting', el),
}
</script>

<template>
  <img
    v-lazy-img="lazyBinding"
    style="background-color: hsl(var(--maz-background-300)); width: 80%;"
    class="flex flex-center rounded"
  >
</template>

Global install

Vue

import errorPhoto from 'path/to/error-photo.png'
import { vLazyImgInstall, type vLazyImgOptions } from 'maz-ui/directives'
import { createApp } from 'vue'

const app = createApp(App)

// all options (optional)
const vLazyImgOptions: vLazyImgOptions = {
  baseClass: 'm-lazy-img',
  loadedClass: 'm-lazy-loaded',
  loadingClass: 'm-lazy-loading',
  errorClass: 'm-lazy-error',
  fallbackClass: 'm-lazy-fallback',
  observerOnce: true,
  loadOnce: true,
  noUseErrorPhoto: false,
  observerOptions: {
    root: undefined,
    rootMargin: undefined,
    threshold: 0.1,
  },
  errorPhoto,
  onLoading: (el: Element) => console.log('loading', el),
  onLoaded: (el: Element) => console.log('loaded', el),
  onError: (el: Element) => console.log('error', el),
  onIntersecting: (el: Element) => console.log('intersecting', el),
}

app.use(vLazyImgInstall, vLazyImgOptions)

app.mount('#app')

Nuxt

Please refer to the Nuxt module documentation for more information.

Types

export interface vLazyImgOptions {
  baseClass?: string
  loadingClass?: string
  loadedClass?: string
  errorClass?: string
  fallbackClass?: string
  observerOnce?: boolean
  loadOnce?: boolean
  observerOptions?: {
    root?: HTMLElement | null
    threshold: number
    rootMargin?: string
  }
  fallbackSrc?: string
  onLoading?: (el: Element) => unknown
  onLoaded?: (el: Element) => unknown
  onError?: (el: Element) => unknown
  onIntersecting?: (el: Element) => unknown
}

interface vLazyImgBindingOptions extends vLazyImgOptions {
  src?: string
  disabled?: boolean
}

export type vLazyImgBindingValue = string | vLazyImgBindingOptions