Class ProgressPreloader

Page preloader for calculating and displaying the loading progress of resources (images, videos, custom elements). Provides smooth progress transitions.

Documentation

Hierarchy (View Summary)

Constructors

Accessors

  • get isDestroyed(): boolean

    Checks if the module has been destroyed.

    Returns boolean

  • get isHidden(): boolean

    Returns whether the preloader is currently hidden.

    Returns boolean

  • get loadedWeight(): number

    Loaded weight

    Returns number

  • get loadProgress(): number

    Current loading progress (0 to 1).

    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

    Gets the current progress value.

    Returns number

  • get resourceContainer(): HTMLElement

    Container source for preloader resources.

    Returns HTMLElement

  • get totalWeight(): number

    Calculates the total number of resources to preload, including their weight.

    Returns number

Methods

  • Adds a class name on an element, and keeps track of it for removal when the module is destroyed.

    Parameters

    • element: Element

      The target DOM element.

    • className: string

      The class name to toggle.

    Returns void

  • Helper function to generate classnames with the module's prefix.

    Parameters

    • ...classNames: string[]

      The class names to generate.

    Returns string

    A string of class names with the module's prefix applied.

  • Cleans up resources and destroys the preloader instance.

    Returns void

  • Retrieves the default mutable properties.

    Returns { __mutableProp: true }

  • Retrieves the default static properties.

    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
      
  • Resolves when the page and all resources are fully loaded.

    Parameters

    • callback: () => void

    Returns void

  • Adds a custom resource

    Parameters

    • id: string | Element

      The custom resource element or identifier to preload.

    • weight: number = 1

      The resource weight

    Returns void

  • Destroys the module, cleaning up resources, callbacks, and event listeners.

    Returns void

  • Hides the preloader with a custom animation duration.

    Parameters

    • duration: number

      The duration of the hide animation (in milliseconds). Applies only when the container is used.

    • Optionalcallback: () => void

      The callback to execute when the hide animation is complete.

    Returns undefined | () => void

    Returns an action destructor.

  • Adds a callback on the module's destruction.

    Parameters

    • action: () => void

      The function to execute during destruction.

    Returns void

  • Registers a callback for when the preloader is fully hidden.

    Parameters

    • action: () => void

      The callback function to execute.

    Returns () => void

    A destructor.

  • Registers a callback for when the preloader starts hiding.

    Parameters

    • action: () => void

      The callback function to execute.

    Returns () => void

    A destructor.

  • Emits a resource load event and updates the count of loaded resources.

    Parameters

    • id: string | Element

      The resource element or identifier being loaded.

    • OptionalloadedWeight: number

    Returns void