Class ProgressPreloader

Resource-aware page preloader with smooth progress display.

  • Tracks weighted resources (images, videos, DOM custom elements, virtual ids)
  • Exposes raw loadProgress and smoothed progress for UI
  • Inherits Preloader hide lifecycle after loaded

Progress pipeline

resolveResource → weighted loadProgress → Raf damp (lerp) → progress → optional Timeline finish (endDuration) → loaded.

Documentation

Hierarchy (View Summary)

Constructors

Accessors

  • get isDestroyed(): boolean

    Indicates whether the instance has been destroyed.

    After destruction, destroy is a no-op.

    Returns boolean

  • get isHidden(): boolean

    Whether the hide animation has completed and hidden has fired.

    Returns boolean

  • get isHiding(): boolean

    Whether hide has started but hidden has not fired yet.

    Returns boolean

  • get isLoaded(): boolean

    Whether the load signal has fired and loaded was emitted.

    Returns boolean

  • get loadedWeight(): number

    Sum of all resource loaded values.

    Returns number

  • get loadProgress(): number

    Actual weighted progress (0–1), not interpolated.

    Updates immediately when a resource resolves.

    Returns number

  • get name(): string

    The name of the module, derived from the class name

    Returns string

  • get prefix(): string

    Optional prefix for classnames used by the module

    Returns string

  • get progress(): number

    Smoothed progress (0–1) for UI animations.

    Follows loadProgress via Raf.damp using lerp. Preloader.loaded waits for progress >= 1, not loadProgress.

    Returns number

  • get totalWeight(): number

    Sum of all resource weight values.

    Returns number

Methods

  • Adds prefixed classes to an element and removes them on destroy.

    Skips classes that are already present on the element.

    Parameters

    • element: Element

      Target DOM element.

    • ...classes: string[]

      Unprefixed class name segments.

    Returns void

  • Builds one or more prefixed class names.

    Parameters

    • ...classes: string[]

      Unprefixed class name segments.

    Returns string

    Space-separated prefixed class string.

  • Internal method to handle the destruction of the module. It removes all callbacks, destroys properties, and cleans up event listeners and class names.

    Returns void

  • Set default mutable props

    Returns { __mutableProp: true }

  • Get default static props

    Returns {
        __staticProp: true;
        container: HTMLElement;
        customSelector: string;
        endDuration: number;
        hide: number | false;
        ignoreClassName: string;
        lerp: number;
        preloadImages: boolean;
        preloadVideos: boolean;
        resourceContainer: HTMLElement;
    }

    • __staticProp: true
    • container: HTMLElement

      The container for the preloader. Set it to null if you only need the preloader logic.

    • customSelector: string

      Selector for custom resources to preload. Elements should include data-weight and data-loaded attributes. Example: data-weight="10" for a weight of 10, data-loaded="10" when loaded.

      '.js-preload'
      
    • endDuration: number

      Duration (ms) to complete the preloader if resources are loaded but progress < 1.

      500
      
    • hide: number | false

      Defines whether to automatically hide the preloader container.

      • false: Disables the hiding animation, allowing you to manage it manually.
      • number: Specifies the animation duration in milliseconds. This works only if the container is an HTML element.
      250
      
    • ignoreClassName: string

      Class name for elements to exclude from preloading.

      'js-preload-ignore'
      
    • lerp: number

      Linear interpolation factor for smooth progress updates. 1 disables interpolation for instant updates.

      0.1
      
    • preloadImages: boolean

      Enables automatic preloading of images.

      true
      
    • preloadVideos: boolean

      Enables automatic preloading of videos.

      false
      
    • resourceContainer: HTMLElement

      Container source for preloader resources.

      null
      
  • Waits for smoothed progress >= 1, then runs Preloader load handling.

    Overrides Preloader._onLoaded — does not use initVevet().onLoad directly.

    Parameters

    • callback: () => void

    Returns void

  • Registers a virtual resource by id.

    Parameters

    • id: string | Element
    • weight: number = 1

    Returns void

  • Destroys the instance and runs all registered cleanup actions.

    Safe to call multiple times; subsequent calls are ignored.

    Execution order:

    1. _destroy
    2. all onDestroy callbacks, in registration order
    3. isDestroyed is set to true

    Returns void

  • Hides the preloader with a fade on container.

    Works only after load and when not already hiding. The returned destructor cancels the optional callback only — the fade still runs.

    Parameters

    • duration: number
    • Optionalcallback: () => void

    Returns undefined | () => void

  • Registers a function to run when the instance is destroyed.

    If the instance is already destroyed, action runs immediately.

    Parameters

    • action: () => void

      Cleanup function (for example remove listeners or DOM classes).

    Returns void

  • Registers a one-shot listener for hidden, or runs immediately if already hidden.

    Parameters

    • action: () => void

    Returns () => void

    A destructor that removes the listener.

  • Registers a one-shot listener for hide, or runs immediately if already hiding.

    Parameters

    • action: () => void

    Returns () => void

    A destructor that removes the listener.

  • Updates loaded weight for a resource and emits IProgressPreloaderCallbacksMap.resource.

    For custom DOM elements, call as data-loaded changes (or use partial weights).

    Parameters

    • id: string | Element
    • OptionalloadedWeight: number

    Returns void