tessl/npm-vue-lazyload

Vue.js plugin for lazy-loading images and components with directives, components, and programmatic APIs

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Vue Lazyload

Name: tessl/npm-vue-lazyload
Author: tessl

Vue Lazyload is a Vue.js plugin designed for lazy-loading images and components in Vue 3 applications. It provides directives (v-lazy, v-lazy-container), components (lazy-component, lazy-image), and programmatic APIs for optimizing image loading performance.

Package Information

Package Name: vue-lazyload
Package Type: npm
Language: TypeScript
Installation: npm install vue-lazyload

Core Imports

import VueLazyload from "vue-lazyload";

// Named exports for TypeScript support
import { 
  VueLazyloadOptions, 
  VueLazyloadHandler, 
  VueReactiveListener, 
  loadImageAsyncOption 
} from "vue-lazyload";

For CommonJS:

const VueLazyload = require("vue-lazyload");
const { VueLazyloadOptions, VueLazyloadHandler } = require("vue-lazyload");

Basic Usage

import { createApp } from "vue";
import VueLazyload from "vue-lazyload";
import App from "./App.vue";

const app = createApp(App);

// Install with default options
app.use(VueLazyload);

// Or install with custom options
app.use(VueLazyload, {
  preLoad: 1.3,
  error: "/error.png",
  loading: "/loading.gif",
  attempt: 3,
  observer: true,
  lazyComponent: true,
  lazyImage: true
});

app.mount("#app");

In templates:

<template>
  <div>
    <!-- Basic lazy loading -->
    <img v-lazy="imageUrl" alt="Lazy loaded image">
    
    <!-- Background image lazy loading -->
    <div v-lazy:background-image="backgroundUrl"></div>
    
    <!-- Container-based lazy loading -->
    <div v-lazy-container="{ selector: 'img' }">
      <img data-src="/image1.jpg">
      <img data-src="/image2.jpg">
    </div>
    
    <!-- Lazy component -->
    <lazy-component @show="onComponentShow">
      <img :src="heavyImageUrl" alt="Heavy image">
    </lazy-component>
  </div>
</template>

Architecture

Vue Lazyload is built around several key components:

Plugin System: Vue plugin that registers directives, components, and provides global access
Lazy Handler: Core lazy loading logic with IntersectionObserver or event-based detection
Reactive Listeners: Individual image listeners that manage loading states and rendering
Container Manager: Handles lazy loading for multiple images within containers
Components: Vue components for lazy loading content and images
Event System: Hooks for loading, loaded, and error events

Capabilities

Plugin Installation

Main plugin installation and configuration system for registering directives and components.

interface VueLazyloadPluginObject {
  install(Vue: App, options?: VueLazyloadOptions): void;
}

interface VueLazyloadOptions {
  lazyComponent?: boolean;
  lazyImage?: boolean;
  preLoad?: number;
  error?: string;
  loading?: string;
  cors?: string;
  attempt?: number;
  listenEvents?: string[];
  supportWebp?: boolean;
  adapter?: AdapterOptions;
  filter?: FilterOptions;
  dispatchEvent?: boolean;
  throttleWait?: number;
  observer?: boolean;
  observerOptions?: IntersectionObserverInit;
  silent?: boolean;
  preLoadTop?: number;
  scale?: number;
}

Plugin Installation

Directive Usage

Vue directives for declarative lazy loading of images and background images.

// v-lazy directive
interface LazyDirective {
  beforeMount(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
  beforeUpdate(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
  updated(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
  unmounted(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
}

// v-lazy-container directive
interface LazyContainerDirective {
  beforeMount(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
  updated(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
  unmounted(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
}

Directive Usage

Lazy Components

Vue components for lazy loading content and images with full Vue 3 composition API support.

interface LazyComponentProps {
  tag?: string;
}

interface LazyImageProps {
  src: string | VueLazyloadImageOptions;
  tag?: string;
}

interface VueLazyloadImageOptions {
  src: string;
  error?: string;
  loading?: string;
  attempt?: number;
}

Lazy Components

Programmatic API

Direct access to the lazy loading handler for manual control and event handling.

interface VueLazyloadHandler {
  $on(event: string, callback: VueLazyloadListenEvent): void;
  $once(event: string, callback: VueLazyloadListenEvent): void;
  $off(event: string, callback?: VueLazyloadListenEvent): void;
  lazyLoadHandler(): void;
  performance(): VueReactiveListener[];
  add(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
  update(el: HTMLElement, binding: DirectiveBinding, vnode?: VNode): void;
  remove(el: HTMLElement): void;
  setMode(mode: string): void;
}

Programmatic API

Types

interface VueReactiveListener {
  el: Element;
  src: string;
  error: string;
  loading: string;
  bindType: string;
  attempt: number;
  naturalHeight: number;
  naturalWidth: number;
  options: VueLazyloadOptions;
  rect: DOMRect;
  $parent: Element;
  elRenderer: Function;
  performanceData: Performance;
}

interface VueLazyloadListenEvent {
  (listener: VueReactiveListener, cache: boolean): void;
}

interface Performance {
  init: number;
  loadStart: number;
  loadEnd: number;
}

interface AdapterOptions {
  [key: string]: (listener: VueReactiveListener, options: VueLazyloadOptions) => void;
}

interface FilterOptions {
  [key: string]: (listener: VueReactiveListener, options: VueLazyloadOptions) => void;
}

interface loadImageAsyncOption {
  src: string;
  cors?: string;
}

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:npm/vue-lazyload@3.0.x
Publish Source: CLI
Badge