Props

note

All Preloader's props are available in this class.

Static Props

Static properties are set during initialization and cannot be modified later.

preloadImages

• Type: boolean
• Default: true
• Enables automatic preloading of images.
• Ignores lazy images.
• Does not load resources twice.

const preloader = new ProgressPreloader({
  container: document.getElementById("container"),
  preloadImages: true,
});

preloadVideos

• Type: boolean
• Default: false
• Enables automatic preloading of videos.

const preloader = new ProgressPreloader({
  container: document.getElementById("container"),
  preloadVideos: false,
});

customSelector

• Type: string
• Default: '.js-preload'
• Selector for virtual resources to preload.
• Elements should have data-weight and data-loaded attributes.
  Preloader observes data-loaded change and updates progress when needed.
  Example: data-weight="10" indicates weight; data-loaded="10" means fully loaded.
• See demo

const preloader = new ProgressPreloader({
  container: document.getElementById("container"),
  customSelector: '.js-preload',
});

<div class="js-preload" data-weight="4" data-loaded="3"></div>

ignoreClassName

• Type: string
• Default: 'js-preload-ignore'
• Class name for elements to exclude from preloading.

const preloader = new ProgressPreloader({
  container: document.getElementById("container"),
  ignoreClassName: 'js-preload-ignore',
});

<!-- The image will not be accepted by the preloader -->
<img src="..." class="js-preload-ignore" />

lerp

• Type: number
• Default: 0.1
• Controls how smoothly the visible progress value (progress) interpolates toward the real loading progress (loadProgress).
• Lower values → slower, smoother animation.
• 1 disables interpolation and makes progress equal to loadProgress every frame.
• This affects only visual animation, not the real loading state.

const preloader = new ProgressPreloader({
  container: document.getElementById("container"),
  lerp: 0.1, // smooth progress animation
  lerp: 1, // instant progress change
});

endDuration

• Type: number
• Default: 500
• Duration (in ms) for a forced completion animation when all resources are loaded but the current interpolated progress is still below 1.
  This creates a smooth "finish animation" even if the last resources load instantly

const preloader = new ProgressPreloader({
  container: document.getElementById("container"),
  endDuration: 500
});