Dynamic Web Resource Loading with ResourceLoader.js

Preview:

Description:

ResourceLoader is a lightweight JavaScript library that dynamically loads various web assets like JavaScript, CSS, images, JSON, and other file types.

Features:

• Concurrency Control: ResourceLoader limits the number of concurrent loads to help prevent browser overload.
• Retries and Error Handling: The library automatically retries failed resource loads with customizable retry delays, enhancing reliability. Error handling ensures that developers can manage failures gracefully, improving application stability.
• Cache Busting: ResourceLoader optionally appends cache-busting query strings to resource URLs, preventing caching issues.
• Cross-Origin and Integrity Handling: Support for cross-origin and integrity attributes ensures secure resource loading.
• Blob and File Loading: ResourceLoader can load and handle binary files like images, audio, and video as blobs.
• Callbacks for Success and Failure: You can handle success or failure for each resource with callbacks.

How to use it:

1. Download and include the ResourceLoader script in your HTML document:

<script src="path/to/ResourceLoader.js"></script>

2. Handle loading of JavaScript, CSS, images, JSON, and other file types using the include(path, options) method. You can then use the .then() and .catch() methods handle success and failure.

// JavaScript & CSS
ResourceLoader.include(
  [
    '/path/to/js.js',
    '/path/to/css.css',
  ],
  {
    // options here
  }
)
.then(() => {
  console.log('Loaded');
})
.catch((error) => {
  console.error('Error:', error);
});

// JSON Data
ResourceLoader.include(['/path/to/data.json'], {
  onSuccess: (data) => {
    console.log('Loaded:', data);
  },
  onError: (error, url) => {
    console.error(`Error loading JSON from: ${url}`, error.message);
  },
});

// Image
ResourceLoader.include(['/path/to/image.jpg'], {
  onSuccess: (url) => {
    const img = new Image();
    img.src = url;
    console.log('Loaded');
  },
  onError: (error, url) => {
    console.error(`Error loading image from: ${url}`, error.message);
  },
});

// load other file types as blob
ResourceLoader.include(['/path/to/audio.mp3'], {
  onSuccess: (data) => {
    const blobUrl = URL.createObjectURL(data);
    const audioElement = document.createElement('audio');
    audioElement.controls = true;
    audioElement.src = blobUrl;
  },
  onError: (error, url) => {
    console.error(`Error loading audio from: ${url}`, error.message);
  },
});

3. Customize how resources are loaded using the following options:

• logLevel: Sets the logging level to silent, warn, or verbose. The default is warn.
• onSuccess: A callback executed upon a successful resource load.
• onError: A callback executed if a resource fails to load.
• retries: Specifies how many times a failed resource load should be retried.
• retryDelay: Sets the delay between retry attempts.
• deferScriptsUntilReady: If true, scripts load only after DOM is ready. Default is true.
• maxConcurrency: Limits concurrent resource loading. Default is 3.
• cacheBusting: Appends a cache-busting query parameter to resource URLs. Default is false.
• crossorigin: Sets the crossorigin attribute for JS/CSS resources.
• attributes: Additional attributes to set on the element, such as integrity.

4. API methods.

// Unloads a resource from the page.
ResourceLoader.unloadResource('/path/to/file/');
// Cancels the loading of a resource.
ResourceLoader.cancelResource('/path/to/file/');
// Cancels all pending resource loads
ResourceLoader.cancelAll();
// Gets the current state of a resource
const state = ResourceLoader.getResourceState('https://example.com/script.js');