BranchesTags

Repository files navigation

ResourceLoader

ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.

Features

  • Dynamic Resource Loading: Load JS, CSS, images, JSON, fonts, and more dynamically.
  • Concurrency Control: Limit the number of concurrent loads to prevent overwhelming the browser.
  • Retries and Error Handling: Automatically retry failed resource loads, with customizable retry delays.
  • Cache Busting: Optionally append cache-busting query strings to prevent caching issues.
  • Cross-Origin and Integrity Handling: Support for crossorigin and integrity attributes for secure resource loading.
  • Blob and File Loading: Load and handle binary files like images, audio, and video as blobs.
  • Callbacks for Success and Failure: Handle success or failure for each resource with callbacks.

Installation

You can directly download the ResourceLoader.js file or include it from your project.

CDN Usage

Use jsDelivr (recommended) or unpkg directly from the npm package.

Pinned version:

<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js@1.0.1/resourceLoader.js"></script>

Latest published version:

<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js/resourceLoader.js"></script>

unpkg pinned version:

<scriptsrc="https://unpkg.com/resourceloader-js@1.0.1/resourceLoader.js"></script>

Direct Download

You can download the ResourceLoader.js file directly from this repository.

Usage

After including ResourceLoader.js in your HTML:

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

ResourceLoader will be available as a global object window.ResourceLoader or simply ResourceLoader in your code.

Demo

Some examples of ResourceLoader in action can be found at CodePen.

Usage

Include the ResourceLoader.js file in your HTML or project:

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

Example Usage

Basic JavaScript and CSS Loading

ResourceLoader.include(['https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js','https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css',],{logLevel: 'verbose',}).then(()=>{console.log('Resources loaded successfully.');}).catch((error)=>{console.error('Error loading resources:',error);});

JSON Loading

ResourceLoader.include(['https://example.com/data.json'],{onSuccess: (data)=>{console.log('JSON data loaded:',data);},onError: (error,url)=>{console.error(`Error loading JSON from: ${url}`,error.message);},});

Image Loading

ResourceLoader.include(['https://example.com/image.jpg'],{onSuccess: (url)=>{constimg=newImage();img.src=url;document.body.appendChild(img);console.log('Image loaded successfully.');},onError: (error,url)=>{console.error(`Error loading image from: ${url}`,error.message);},});

Audio Loading as Blob

ResourceLoader.include(['https://example.com/audio.mp3'],{onSuccess: (data)=>{constblobUrl=URL.createObjectURL(data);constaudioElement=document.createElement('audio');audioElement.controls=true;audioElement.src=blobUrl;document.body.appendChild(audioElement);},onError: (error,url)=>{console.error(`Error loading audio from: ${url}`,error.message);},});

Cache Busting

ResourceLoader.include(['https://example.com/script.js'],{cacheBusting: true,});

API

include(urls, options)

  • urls: An array of URLs or a single URL to be loaded.
  • options:
    • logLevel: (default 'warn') Log level. Can be 'silent', 'warn', or 'verbose'.
    • onSuccess: Callback when the resource(s) load successfully.
    • onError: Callback when the resource fails to load.
    • retries: Number of times to retry loading on failure.
    • retryDelay: Delay between retry attempts.
    • deferScriptsUntilReady: If true, defers script loading until DOM is ready.
    • maxConcurrency: Limit concurrent resource loads.
    • cacheBusting: Append a cache-busting query parameter to the resource URL.
    • crossorigin: Set cross-origin for JS/CSS resources.
    • attributes: Additional attributes to set on the element (e.g., integrity).

Returns a Promise that resolves with an array of per-resource results when all resources succeed:

[{status: 'fulfilled',value: 'https://example.com/script.js'},];

If any resource fails, the Promise rejects with an aggregate error:

{type: 'aggregate',message: 'One or more resources failed to load.',results: [{status: 'fulfilled',value: 'https://example.com/good.css'},{status: 'rejected',reason: {type: 'network',message: '...'},url: 'https://example.com/bad.css'}]}

unloadResource(url)

Unloads a resource from the page.

ResourceLoader.unloadResource('https://example.com/script.js');

cancelResource(url)

Cancels the loading of a resource.

ResourceLoader.cancelResource('https://example.com/script.js');

cancelAll()

Cancels all pending resource loads.

ResourceLoader.cancelAll();

getResourceState(url)

Gets the current state of a resource ("loading", "loaded", "unloaded").

conststate=ResourceLoader.getResourceState('https://example.com/script.js');console.log(state);// "loaded"

License

This project is licensed under the MIT License.

Created by Peter Benoit

About

ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.

peterbenoit.com/resourceloader/

Topics

loaderresource

Resources

Readme
MIT license
Activity

Stars

7 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
ResourceLoader
ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.
Features
  • Dynamic Resource Loading: Load JS, CSS, images, JSON, fonts, and more dynamically.
  • Concurrency Control: Limit the number of concurrent loads to prevent overwhelming the browser.
  • Retries and Error Handling: Automatically retry failed resource loads, with customizable retry delays.
  • Cache Busting: Optionally append cache-busting query strings to prevent caching issues.
  • Cross-Origin and Integrity Handling: Support for crossorigin and integrity attributes for secure resource loading.
  • Blob and File Loading: Load and handle binary files like images, audio, and video as blobs.
  • Callbacks for Success and Failure: Handle success or failure for each resource with callbacks.
Installation
You can directly download the ResourceLoader.js file or include it from your project.
CDN Usage
Use jsDelivr (recommended) or unpkg directly from the npm package.
Pinned version:
<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js@1.0.1/resourceLoader.js"></script>
Latest published version:
<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js/resourceLoader.js"></script>
unpkg pinned version:
<scriptsrc="https://unpkg.com/resourceloader-js@1.0.1/resourceLoader.js"></script>
Direct Download
You can download the ResourceLoader.js file directly from this repository.
Usage
After including ResourceLoader.js in your HTML:
<scriptsrc="path/to/ResourceLoader.js"></script>
ResourceLoader will be available as a global object window.ResourceLoader or simply ResourceLoader in your code.
Demo
Some examples of ResourceLoader in action can be found at CodePen.
Usage
Include the ResourceLoader.js file in your HTML or project:
<scriptsrc="path/to/ResourceLoader.js"></script>
Example Usage
Basic JavaScript and CSS Loading
ResourceLoader.include(['https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js','https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css',],{logLevel: 'verbose',}).then(()=>{console.log('Resources loaded successfully.');}).catch((error)=>{console.error('Error loading resources:',error);});
JSON Loading
ResourceLoader.include(['https://example.com/data.json'],{onSuccess: (data)=>{console.log('JSON data loaded:',data);},onError: (error,url)=>{console.error(`Error loading JSON from: ${url}`,error.message);},});
Image Loading
ResourceLoader.include(['https://example.com/image.jpg'],{onSuccess: (url)=>{constimg=newImage();img.src=url;document.body.appendChild(img);console.log('Image loaded successfully.');},onError: (error,url)=>{console.error(`Error loading image from: ${url}`,error.message);},});
Audio Loading as Blob
ResourceLoader.include(['https://example.com/audio.mp3'],{onSuccess: (data)=>{constblobUrl=URL.createObjectURL(data);constaudioElement=document.createElement('audio');audioElement.controls=true;audioElement.src=blobUrl;document.body.appendChild(audioElement);},onError: (error,url)=>{console.error(`Error loading audio from: ${url}`,error.message);},});
Cache Busting
ResourceLoader.include(['https://example.com/script.js'],{cacheBusting: true,});
API
include(urls, options)
  • urls: An array of URLs or a single URL to be loaded.
  • options:

    • logLevel: (default 'warn') Log level. Can be 'silent', 'warn', or 'verbose'.
    • onSuccess: Callback when the resource(s) load successfully.
    • onError: Callback when the resource fails to load.
    • retries: Number of times to retry loading on failure.
    • retryDelay: Delay between retry attempts.
    • deferScriptsUntilReady: If true, defers script loading until DOM is ready.
    • maxConcurrency: Limit concurrent resource loads.
    • cacheBusting: Append a cache-busting query parameter to the resource URL.
    • crossorigin: Set cross-origin for JS/CSS resources.
    • attributes: Additional attributes to set on the element (e.g., integrity).
Returns a Promise that resolves with an array of per-resource results when all resources succeed:
[{status: 'fulfilled',value: 'https://example.com/script.js'},];
If any resource fails, the Promise rejects with an aggregate error:
{type: 'aggregate',message: 'One or more resources failed to load.',results: [{status: 'fulfilled',value: 'https://example.com/good.css'},{status: 'rejected',reason: {type: 'network',message: '...'},url: 'https://example.com/bad.css'}]}
unloadResource(url)
Unloads a resource from the page.
ResourceLoader.unloadResource('https://example.com/script.js');
cancelResource(url)
Cancels the loading of a resource.
ResourceLoader.cancelResource('https://example.com/script.js');
cancelAll()
Cancels all pending resource loads.
ResourceLoader.cancelAll();
getResourceState(url)
Gets the current state of a resource ("loading", "loaded", "unloaded").
conststate=ResourceLoader.getResourceState('https://example.com/script.js');console.log(state);// "loaded"
License
This project is licensed under the MIT License.
Created by Peter Benoit
About
ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.
peterbenoit.com/resourceloader/
Topics
loaderresource
Resources
Readme
MIT license
Activity
Stars
7 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
ResourceLoader
ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.
Features
  • Dynamic Resource Loading: Load JS, CSS, images, JSON, fonts, and more dynamically.
  • Concurrency Control: Limit the number of concurrent loads to prevent overwhelming the browser.
  • Retries and Error Handling: Automatically retry failed resource loads, with customizable retry delays.
  • Cache Busting: Optionally append cache-busting query strings to prevent caching issues.
  • Cross-Origin and Integrity Handling: Support for crossorigin and integrity attributes for secure resource loading.
  • Blob and File Loading: Load and handle binary files like images, audio, and video as blobs.
  • Callbacks for Success and Failure: Handle success or failure for each resource with callbacks.
Installation
You can directly download the ResourceLoader.js file or include it from your project.
CDN Usage
Use jsDelivr (recommended) or unpkg directly from the npm package.
Pinned version:
<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js@1.0.1/resourceLoader.js"></script>
Latest published version:
<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js/resourceLoader.js"></script>
unpkg pinned version:
<scriptsrc="https://unpkg.com/resourceloader-js@1.0.1/resourceLoader.js"></script>
Direct Download
You can download the ResourceLoader.js file directly from this repository.
Usage
After including ResourceLoader.js in your HTML:
<scriptsrc="path/to/ResourceLoader.js"></script>
ResourceLoader will be available as a global object window.ResourceLoader or simply ResourceLoader in your code.
Demo
Some examples of ResourceLoader in action can be found at CodePen.
Usage
Include the ResourceLoader.js file in your HTML or project:
<scriptsrc="path/to/ResourceLoader.js"></script>
Example Usage
Basic JavaScript and CSS Loading
ResourceLoader.include(['https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js','https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css',],{logLevel: 'verbose',}).then(()=>{console.log('Resources loaded successfully.');}).catch((error)=>{console.error('Error loading resources:',error);});
JSON Loading
ResourceLoader.include(['https://example.com/data.json'],{onSuccess: (data)=>{console.log('JSON data loaded:',data);},onError: (error,url)=>{console.error(`Error loading JSON from: ${url}`,error.message);},});
Image Loading
ResourceLoader.include(['https://example.com/image.jpg'],{onSuccess: (url)=>{constimg=newImage();img.src=url;document.body.appendChild(img);console.log('Image loaded successfully.');},onError: (error,url)=>{console.error(`Error loading image from: ${url}`,error.message);},});
Audio Loading as Blob
ResourceLoader.include(['https://example.com/audio.mp3'],{onSuccess: (data)=>{constblobUrl=URL.createObjectURL(data);constaudioElement=document.createElement('audio');audioElement.controls=true;audioElement.src=blobUrl;document.body.appendChild(audioElement);},onError: (error,url)=>{console.error(`Error loading audio from: ${url}`,error.message);},});
Cache Busting
ResourceLoader.include(['https://example.com/script.js'],{cacheBusting: true,});
API
include(urls, options)
  • urls: An array of URLs or a single URL to be loaded.
  • options:

    • logLevel: (default 'warn') Log level. Can be 'silent', 'warn', or 'verbose'.
    • onSuccess: Callback when the resource(s) load successfully.
    • onError: Callback when the resource fails to load.
    • retries: Number of times to retry loading on failure.
    • retryDelay: Delay between retry attempts.
    • deferScriptsUntilReady: If true, defers script loading until DOM is ready.
    • maxConcurrency: Limit concurrent resource loads.
    • cacheBusting: Append a cache-busting query parameter to the resource URL.
    • crossorigin: Set cross-origin for JS/CSS resources.
    • attributes: Additional attributes to set on the element (e.g., integrity).
Returns a Promise that resolves with an array of per-resource results when all resources succeed:
[{status: 'fulfilled',value: 'https://example.com/script.js'},];
If any resource fails, the Promise rejects with an aggregate error:
{type: 'aggregate',message: 'One or more resources failed to load.',results: [{status: 'fulfilled',value: 'https://example.com/good.css'},{status: 'rejected',reason: {type: 'network',message: '...'},url: 'https://example.com/bad.css'}]}
unloadResource(url)
Unloads a resource from the page.
ResourceLoader.unloadResource('https://example.com/script.js');
cancelResource(url)
Cancels the loading of a resource.
ResourceLoader.cancelResource('https://example.com/script.js');
cancelAll()
Cancels all pending resource loads.
ResourceLoader.cancelAll();
getResourceState(url)
Gets the current state of a resource ("loading", "loaded", "unloaded").
conststate=ResourceLoader.getResourceState('https://example.com/script.js');console.log(state);// "loaded"
License
This project is licensed under the MIT License.
Created by Peter Benoit
About
ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.
peterbenoit.com/resourceloader/
Topics
loaderresource
Resources
Readme
MIT license
Activity
Stars
7 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
ResourceLoader
ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.
Features
  • Dynamic Resource Loading: Load JS, CSS, images, JSON, fonts, and more dynamically.
  • Concurrency Control: Limit the number of concurrent loads to prevent overwhelming the browser.
  • Retries and Error Handling: Automatically retry failed resource loads, with customizable retry delays.
  • Cache Busting: Optionally append cache-busting query strings to prevent caching issues.
  • Cross-Origin and Integrity Handling: Support for crossorigin and integrity attributes for secure resource loading.
  • Blob and File Loading: Load and handle binary files like images, audio, and video as blobs.
  • Callbacks for Success and Failure: Handle success or failure for each resource with callbacks.
Installation
You can directly download the ResourceLoader.js file or include it from your project.
CDN Usage
Use jsDelivr (recommended) or unpkg directly from the npm package.
Pinned version:
<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js@1.0.1/resourceLoader.js"></script>
Latest published version:
<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js/resourceLoader.js"></script>
unpkg pinned version:
<scriptsrc="https://unpkg.com/resourceloader-js@1.0.1/resourceLoader.js"></script>
Direct Download
You can download the ResourceLoader.js file directly from this repository.
Usage
After including ResourceLoader.js in your HTML:
<scriptsrc="path/to/ResourceLoader.js"></script>
ResourceLoader will be available as a global object window.ResourceLoader or simply ResourceLoader in your code.
Demo
Some examples of ResourceLoader in action can be found at CodePen.
Usage
Include the ResourceLoader.js file in your HTML or project:
<scriptsrc="path/to/ResourceLoader.js"></script>
Example Usage
Basic JavaScript and CSS Loading
ResourceLoader.include(['https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js','https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css',],{logLevel: 'verbose',}).then(()=>{console.log('Resources loaded successfully.');}).catch((error)=>{console.error('Error loading resources:',error);});
JSON Loading
ResourceLoader.include(['https://example.com/data.json'],{onSuccess: (data)=>{console.log('JSON data loaded:',data);},onError: (error,url)=>{console.error(`Error loading JSON from: ${url}`,error.message);},});
Image Loading
ResourceLoader.include(['https://example.com/image.jpg'],{onSuccess: (url)=>{constimg=newImage();img.src=url;document.body.appendChild(img);console.log('Image loaded successfully.');},onError: (error,url)=>{console.error(`Error loading image from: ${url}`,error.message);},});
Audio Loading as Blob
ResourceLoader.include(['https://example.com/audio.mp3'],{onSuccess: (data)=>{constblobUrl=URL.createObjectURL(data);constaudioElement=document.createElement('audio');audioElement.controls=true;audioElement.src=blobUrl;document.body.appendChild(audioElement);},onError: (error,url)=>{console.error(`Error loading audio from: ${url}`,error.message);},});
Cache Busting
ResourceLoader.include(['https://example.com/script.js'],{cacheBusting: true,});
API
include(urls, options)
  • urls: An array of URLs or a single URL to be loaded.
  • options:

    • logLevel: (default 'warn') Log level. Can be 'silent', 'warn', or 'verbose'.
    • onSuccess: Callback when the resource(s) load successfully.
    • onError: Callback when the resource fails to load.
    • retries: Number of times to retry loading on failure.
    • retryDelay: Delay between retry attempts.
    • deferScriptsUntilReady: If true, defers script loading until DOM is ready.
    • maxConcurrency: Limit concurrent resource loads.
    • cacheBusting: Append a cache-busting query parameter to the resource URL.
    • crossorigin: Set cross-origin for JS/CSS resources.
    • attributes: Additional attributes to set on the element (e.g., integrity).
Returns a Promise that resolves with an array of per-resource results when all resources succeed:
[{status: 'fulfilled',value: 'https://example.com/script.js'},];
If any resource fails, the Promise rejects with an aggregate error:
{type: 'aggregate',message: 'One or more resources failed to load.',results: [{status: 'fulfilled',value: 'https://example.com/good.css'},{status: 'rejected',reason: {type: 'network',message: '...'},url: 'https://example.com/bad.css'}]}
unloadResource(url)
Unloads a resource from the page.
ResourceLoader.unloadResource('https://example.com/script.js');
cancelResource(url)
Cancels the loading of a resource.
ResourceLoader.cancelResource('https://example.com/script.js');
cancelAll()
Cancels all pending resource loads.
ResourceLoader.cancelAll();
getResourceState(url)
Gets the current state of a resource ("loading", "loaded", "unloaded").
conststate=ResourceLoader.getResourceState('https://example.com/script.js');console.log(state);// "loaded"
License
This project is licensed under the MIT License.
Created by Peter Benoit
About
ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.
peterbenoit.com/resourceloader/
Topics
loaderresource
Resources
Readme
MIT license
Activity
Stars
7 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
ResourceLoader
ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.
Features
  • Dynamic Resource Loading: Load JS, CSS, images, JSON, fonts, and more dynamically.
  • Concurrency Control: Limit the number of concurrent loads to prevent overwhelming the browser.
  • Retries and Error Handling: Automatically retry failed resource loads, with customizable retry delays.
  • Cache Busting: Optionally append cache-busting query strings to prevent caching issues.
  • Cross-Origin and Integrity Handling: Support for crossorigin and integrity attributes for secure resource loading.
  • Blob and File Loading: Load and handle binary files like images, audio, and video as blobs.
  • Callbacks for Success and Failure: Handle success or failure for each resource with callbacks.
Installation
You can directly download the ResourceLoader.js file or include it from your project.
CDN Usage
Use jsDelivr (recommended) or unpkg directly from the npm package.
Pinned version:
<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js@1.0.1/resourceLoader.js"></script>
Latest published version:
<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js/resourceLoader.js"></script>
unpkg pinned version:
<scriptsrc="https://unpkg.com/resourceloader-js@1.0.1/resourceLoader.js"></script>
Direct Download
You can download the ResourceLoader.js file directly from this repository.
Usage
After including ResourceLoader.js in your HTML:
<scriptsrc="path/to/ResourceLoader.js"></script>
ResourceLoader will be available as a global object window.ResourceLoader or simply ResourceLoader in your code.
Demo
Some examples of ResourceLoader in action can be found at CodePen.
Usage
Include the ResourceLoader.js file in your HTML or project:
<scriptsrc="path/to/ResourceLoader.js"></script>
Example Usage
Basic JavaScript and CSS Loading
ResourceLoader.include(['https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js','https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css',],{logLevel: 'verbose',}).then(()=>{console.log('Resources loaded successfully.');}).catch((error)=>{console.error('Error loading resources:',error);});
JSON Loading
ResourceLoader.include(['https://example.com/data.json'],{onSuccess: (data)=>{console.log('JSON data loaded:',data);},onError: (error,url)=>{console.error(`Error loading JSON from: ${url}`,error.message);},});
Image Loading
ResourceLoader.include(['https://example.com/image.jpg'],{onSuccess: (url)=>{constimg=newImage();img.src=url;document.body.appendChild(img);console.log('Image loaded successfully.');},onError: (error,url)=>{console.error(`Error loading image from: ${url}`,error.message);},});
Audio Loading as Blob
ResourceLoader.include(['https://example.com/audio.mp3'],{onSuccess: (data)=>{constblobUrl=URL.createObjectURL(data);constaudioElement=document.createElement('audio');audioElement.controls=true;audioElement.src=blobUrl;document.body.appendChild(audioElement);},onError: (error,url)=>{console.error(`Error loading audio from: ${url}`,error.message);},});
Cache Busting
ResourceLoader.include(['https://example.com/script.js'],{cacheBusting: true,});
API
include(urls, options)
  • urls: An array of URLs or a single URL to be loaded.
  • options:

    • logLevel: (default 'warn') Log level. Can be 'silent', 'warn', or 'verbose'.
    • onSuccess: Callback when the resource(s) load successfully.
    • onError: Callback when the resource fails to load.
    • retries: Number of times to retry loading on failure.
    • retryDelay: Delay between retry attempts.
    • deferScriptsUntilReady: If true, defers script loading until DOM is ready.
    • maxConcurrency: Limit concurrent resource loads.
    • cacheBusting: Append a cache-busting query parameter to the resource URL.
    • crossorigin: Set cross-origin for JS/CSS resources.
    • attributes: Additional attributes to set on the element (e.g., integrity).
Returns a Promise that resolves with an array of per-resource results when all resources succeed:
[{status: 'fulfilled',value: 'https://example.com/script.js'},];
If any resource fails, the Promise rejects with an aggregate error:
{type: 'aggregate',message: 'One or more resources failed to load.',results: [{status: 'fulfilled',value: 'https://example.com/good.css'},{status: 'rejected',reason: {type: 'network',message: '...'},url: 'https://example.com/bad.css'}]}
unloadResource(url)
Unloads a resource from the page.
ResourceLoader.unloadResource('https://example.com/script.js');
cancelResource(url)
Cancels the loading of a resource.
ResourceLoader.cancelResource('https://example.com/script.js');
cancelAll()
Cancels all pending resource loads.
ResourceLoader.cancelAll();
getResourceState(url)
Gets the current state of a resource ("loading", "loaded", "unloaded").
conststate=ResourceLoader.getResourceState('https://example.com/script.js');console.log(state);// "loaded"
License
This project is licensed under the MIT License.
Created by Peter Benoit
About
ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.
peterbenoit.com/resourceloader/
Topics
loaderresource
Resources
Readme
MIT license
Activity
Stars
7 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
ResourceLoader
ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.
Features
  • Dynamic Resource Loading: Load JS, CSS, images, JSON, fonts, and more dynamically.
  • Concurrency Control: Limit the number of concurrent loads to prevent overwhelming the browser.
  • Retries and Error Handling: Automatically retry failed resource loads, with customizable retry delays.
  • Cache Busting: Optionally append cache-busting query strings to prevent caching issues.
  • Cross-Origin and Integrity Handling: Support for crossorigin and integrity attributes for secure resource loading.
  • Blob and File Loading: Load and handle binary files like images, audio, and video as blobs.
  • Callbacks for Success and Failure: Handle success or failure for each resource with callbacks.
Installation
You can directly download the ResourceLoader.js file or include it from your project.
CDN Usage
Use jsDelivr (recommended) or unpkg directly from the npm package.
Pinned version:
<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js@1.0.1/resourceLoader.js"></script>
Latest published version:
<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js/resourceLoader.js"></script>
unpkg pinned version:
<scriptsrc="https://unpkg.com/resourceloader-js@1.0.1/resourceLoader.js"></script>
Direct Download
You can download the ResourceLoader.js file directly from this repository.
Usage
After including ResourceLoader.js in your HTML:
<scriptsrc="path/to/ResourceLoader.js"></script>
ResourceLoader will be available as a global object window.ResourceLoader or simply ResourceLoader in your code.
Demo
Some examples of ResourceLoader in action can be found at CodePen.
Usage
Include the ResourceLoader.js file in your HTML or project:
<scriptsrc="path/to/ResourceLoader.js"></script>
Example Usage
Basic JavaScript and CSS Loading
ResourceLoader.include(['https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js','https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css',],{logLevel: 'verbose',}).then(()=>{console.log('Resources loaded successfully.');}).catch((error)=>{console.error('Error loading resources:',error);});
JSON Loading
ResourceLoader.include(['https://example.com/data.json'],{onSuccess: (data)=>{console.log('JSON data loaded:',data);},onError: (error,url)=>{console.error(`Error loading JSON from: ${url}`,error.message);},});
Image Loading
ResourceLoader.include(['https://example.com/image.jpg'],{onSuccess: (url)=>{constimg=newImage();img.src=url;document.body.appendChild(img);console.log('Image loaded successfully.');},onError: (error,url)=>{console.error(`Error loading image from: ${url}`,error.message);},});
Audio Loading as Blob
ResourceLoader.include(['https://example.com/audio.mp3'],{onSuccess: (data)=>{constblobUrl=URL.createObjectURL(data);constaudioElement=document.createElement('audio');audioElement.controls=true;audioElement.src=blobUrl;document.body.appendChild(audioElement);},onError: (error,url)=>{console.error(`Error loading audio from: ${url}`,error.message);},});
Cache Busting
ResourceLoader.include(['https://example.com/script.js'],{cacheBusting: true,});
API
include(urls, options)
  • urls: An array of URLs or a single URL to be loaded.
  • options:

    • logLevel: (default 'warn') Log level. Can be 'silent', 'warn', or 'verbose'.
    • onSuccess: Callback when the resource(s) load successfully.
    • onError: Callback when the resource fails to load.
    • retries: Number of times to retry loading on failure.
    • retryDelay: Delay between retry attempts.
    • deferScriptsUntilReady: If true, defers script loading until DOM is ready.
    • maxConcurrency: Limit concurrent resource loads.
    • cacheBusting: Append a cache-busting query parameter to the resource URL.
    • crossorigin: Set cross-origin for JS/CSS resources.
    • attributes: Additional attributes to set on the element (e.g., integrity).
Returns a Promise that resolves with an array of per-resource results when all resources succeed:
[{status: 'fulfilled',value: 'https://example.com/script.js'},];
If any resource fails, the Promise rejects with an aggregate error:
{type: 'aggregate',message: 'One or more resources failed to load.',results: [{status: 'fulfilled',value: 'https://example.com/good.css'},{status: 'rejected',reason: {type: 'network',message: '...'},url: 'https://example.com/bad.css'}]}
unloadResource(url)
Unloads a resource from the page.
ResourceLoader.unloadResource('https://example.com/script.js');
cancelResource(url)
Cancels the loading of a resource.
ResourceLoader.cancelResource('https://example.com/script.js');
cancelAll()
Cancels all pending resource loads.
ResourceLoader.cancelAll();
getResourceState(url)
Gets the current state of a resource ("loading", "loaded", "unloaded").
conststate=ResourceLoader.getResourceState('https://example.com/script.js');console.log(state);// "loaded"
License
This project is licensed under the MIT License.
Created by Peter Benoit
About
ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.
peterbenoit.com/resourceloader/
Topics
loaderresource
Resources
Readme
MIT license
Activity
Stars
7 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
ResourceLoader
ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.
Features
  • Dynamic Resource Loading: Load JS, CSS, images, JSON, fonts, and more dynamically.
  • Concurrency Control: Limit the number of concurrent loads to prevent overwhelming the browser.
  • Retries and Error Handling: Automatically retry failed resource loads, with customizable retry delays.
  • Cache Busting: Optionally append cache-busting query strings to prevent caching issues.
  • Cross-Origin and Integrity Handling: Support for crossorigin and integrity attributes for secure resource loading.
  • Blob and File Loading: Load and handle binary files like images, audio, and video as blobs.
  • Callbacks for Success and Failure: Handle success or failure for each resource with callbacks.
Installation
You can directly download the ResourceLoader.js file or include it from your project.
CDN Usage
Use jsDelivr (recommended) or unpkg directly from the npm package.
Pinned version:
<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js@1.0.1/resourceLoader.js"></script>
Latest published version:
<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js/resourceLoader.js"></script>
unpkg pinned version:
<scriptsrc="https://unpkg.com/resourceloader-js@1.0.1/resourceLoader.js"></script>
Direct Download
You can download the ResourceLoader.js file directly from this repository.
Usage
After including ResourceLoader.js in your HTML:
<scriptsrc="path/to/ResourceLoader.js"></script>
ResourceLoader will be available as a global object window.ResourceLoader or simply ResourceLoader in your code.
Demo
Some examples of ResourceLoader in action can be found at CodePen.
Usage
Include the ResourceLoader.js file in your HTML or project:
<scriptsrc="path/to/ResourceLoader.js"></script>
Example Usage
Basic JavaScript and CSS Loading
ResourceLoader.include(['https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js','https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css',],{logLevel: 'verbose',}).then(()=>{console.log('Resources loaded successfully.');}).catch((error)=>{console.error('Error loading resources:',error);});
JSON Loading
ResourceLoader.include(['https://example.com/data.json'],{onSuccess: (data)=>{console.log('JSON data loaded:',data);},onError: (error,url)=>{console.error(`Error loading JSON from: ${url}`,error.message);},});
Image Loading
ResourceLoader.include(['https://example.com/image.jpg'],{onSuccess: (url)=>{constimg=newImage();img.src=url;document.body.appendChild(img);console.log('Image loaded successfully.');},onError: (error,url)=>{console.error(`Error loading image from: ${url}`,error.message);},});
Audio Loading as Blob
ResourceLoader.include(['https://example.com/audio.mp3'],{onSuccess: (data)=>{constblobUrl=URL.createObjectURL(data);constaudioElement=document.createElement('audio');audioElement.controls=true;audioElement.src=blobUrl;document.body.appendChild(audioElement);},onError: (error,url)=>{console.error(`Error loading audio from: ${url}`,error.message);},});
Cache Busting
ResourceLoader.include(['https://example.com/script.js'],{cacheBusting: true,});
API
include(urls, options)
  • urls: An array of URLs or a single URL to be loaded.
  • options:

    • logLevel: (default 'warn') Log level. Can be 'silent', 'warn', or 'verbose'.
    • onSuccess: Callback when the resource(s) load successfully.
    • onError: Callback when the resource fails to load.
    • retries: Number of times to retry loading on failure.
    • retryDelay: Delay between retry attempts.
    • deferScriptsUntilReady: If true, defers script loading until DOM is ready.
    • maxConcurrency: Limit concurrent resource loads.
    • cacheBusting: Append a cache-busting query parameter to the resource URL.
    • crossorigin: Set cross-origin for JS/CSS resources.
    • attributes: Additional attributes to set on the element (e.g., integrity).
Returns a Promise that resolves with an array of per-resource results when all resources succeed:
[{status: 'fulfilled',value: 'https://example.com/script.js'},];
If any resource fails, the Promise rejects with an aggregate error:
{type: 'aggregate',message: 'One or more resources failed to load.',results: [{status: 'fulfilled',value: 'https://example.com/good.css'},{status: 'rejected',reason: {type: 'network',message: '...'},url: 'https://example.com/bad.css'}]}
unloadResource(url)
Unloads a resource from the page.
ResourceLoader.unloadResource('https://example.com/script.js');
cancelResource(url)
Cancels the loading of a resource.
ResourceLoader.cancelResource('https://example.com/script.js');
cancelAll()
Cancels all pending resource loads.
ResourceLoader.cancelAll();
getResourceState(url)
Gets the current state of a resource ("loading", "loaded", "unloaded").
conststate=ResourceLoader.getResourceState('https://example.com/script.js');console.log(state);// "loaded"
License
This project is licensed under the MIT License.
Created by Peter Benoit
About
ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.
peterbenoit.com/resourceloader/
Topics
loaderresource
Resources
Readme
MIT license
Activity
Stars
7 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
ResourceLoader
ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.
Features
  • Dynamic Resource Loading: Load JS, CSS, images, JSON, fonts, and more dynamically.
  • Concurrency Control: Limit the number of concurrent loads to prevent overwhelming the browser.
  • Retries and Error Handling: Automatically retry failed resource loads, with customizable retry delays.
  • Cache Busting: Optionally append cache-busting query strings to prevent caching issues.
  • Cross-Origin and Integrity Handling: Support for crossorigin and integrity attributes for secure resource loading.
  • Blob and File Loading: Load and handle binary files like images, audio, and video as blobs.
  • Callbacks for Success and Failure: Handle success or failure for each resource with callbacks.
Installation
You can directly download the ResourceLoader.js file or include it from your project.
CDN Usage
Use jsDelivr (recommended) or unpkg directly from the npm package.
Pinned version:
<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js@1.0.1/resourceLoader.js"></script>
Latest published version:
<scriptsrc="https://cdn.jsdelivr.net/npm/resourceloader-js/resourceLoader.js"></script>
unpkg pinned version:
<scriptsrc="https://unpkg.com/resourceloader-js@1.0.1/resourceLoader.js"></script>
Direct Download
You can download the ResourceLoader.js file directly from this repository.
Usage
After including ResourceLoader.js in your HTML:
<scriptsrc="path/to/ResourceLoader.js"></script>
ResourceLoader will be available as a global object window.ResourceLoader or simply ResourceLoader in your code.
Demo
Some examples of ResourceLoader in action can be found at CodePen.
Usage
Include the ResourceLoader.js file in your HTML or project:
<scriptsrc="path/to/ResourceLoader.js"></script>
Example Usage
Basic JavaScript and CSS Loading
ResourceLoader.include(['https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js','https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css',],{logLevel: 'verbose',}).then(()=>{console.log('Resources loaded successfully.');}).catch((error)=>{console.error('Error loading resources:',error);});
JSON Loading
ResourceLoader.include(['https://example.com/data.json'],{onSuccess: (data)=>{console.log('JSON data loaded:',data);},onError: (error,url)=>{console.error(`Error loading JSON from: ${url}`,error.message);},});
Image Loading
ResourceLoader.include(['https://example.com/image.jpg'],{onSuccess: (url)=>{constimg=newImage();img.src=url;document.body.appendChild(img);console.log('Image loaded successfully.');},onError: (error,url)=>{console.error(`Error loading image from: ${url}`,error.message);},});
Audio Loading as Blob
ResourceLoader.include(['https://example.com/audio.mp3'],{onSuccess: (data)=>{constblobUrl=URL.createObjectURL(data);constaudioElement=document.createElement('audio');audioElement.controls=true;audioElement.src=blobUrl;document.body.appendChild(audioElement);},onError: (error,url)=>{console.error(`Error loading audio from: ${url}`,error.message);},});
Cache Busting
ResourceLoader.include(['https://example.com/script.js'],{cacheBusting: true,});
API
include(urls, options)
  • urls: An array of URLs or a single URL to be loaded.
  • options:

    • logLevel: (default 'warn') Log level. Can be 'silent', 'warn', or 'verbose'.
    • onSuccess: Callback when the resource(s) load successfully.
    • onError: Callback when the resource fails to load.
    • retries: Number of times to retry loading on failure.
    • retryDelay: Delay between retry attempts.
    • deferScriptsUntilReady: If true, defers script loading until DOM is ready.
    • maxConcurrency: Limit concurrent resource loads.
    • cacheBusting: Append a cache-busting query parameter to the resource URL.
    • crossorigin: Set cross-origin for JS/CSS resources.
    • attributes: Additional attributes to set on the element (e.g., integrity).
Returns a Promise that resolves with an array of per-resource results when all resources succeed:
[{status: 'fulfilled',value: 'https://example.com/script.js'},];
If any resource fails, the Promise rejects with an aggregate error:
{type: 'aggregate',message: 'One or more resources failed to load.',results: [{status: 'fulfilled',value: 'https://example.com/good.css'},{status: 'rejected',reason: {type: 'network',message: '...'},url: 'https://example.com/bad.css'}]}
unloadResource(url)
Unloads a resource from the page.
ResourceLoader.unloadResource('https://example.com/script.js');
cancelResource(url)
Cancels the loading of a resource.
ResourceLoader.cancelResource('https://example.com/script.js');
cancelAll()
Cancels all pending resource loads.
ResourceLoader.cancelAll();
getResourceState(url)
Gets the current state of a resource ("loading", "loaded", "unloaded").
conststate=ResourceLoader.getResourceState('https://example.com/script.js');console.log(state);// "loaded"
License
This project is licensed under the MIT License.
Created by Peter Benoit
About
ResourceLoader is a flexible JavaScript library that allows for dynamic loading of resources like JavaScript, CSS, images, JSON, and other file types. It supports features like error handling, retries, cache busting, and concurrency control, making it suitable for various applications.
peterbenoit.com/resourceloader/
Topics
loaderresource
Resources
Readme
MIT license
Activity
Stars
7 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages