JavaScript || Resources.js – JavaScript & CSS Parallel File Loader To Dynamically Import & Load Files To Page Document Using Vanilla JavaScript

Print Friendly, PDF & Email


The following is a module that handles loading JavaScript and CSS files into a document in parallel, as fast as the browser will allow. This module also allows to ensure proper execution order if you have dependencies between files.

Resources.js Source

Contents

1. Load Files One By One
2. Load Multiple Files In Parallel
3. Load Multiple Files In Parallel With Dependencies
4. Load A JavaScript Function From Another JS File
5. Resources.js Namespace
6. More Examples


1. Load Files One By One

Syntax is very straightforward. The following demonstrates loading single files one by one:

The ‘Resources.load‘ function returns an object that contains information about the load status. It can let you know if a file was loaded successfully or not.

To get the load status in order to determine if the file was loaded correctly, it can be done like so:

In the example above, the load results can let you know which files were loaded into the document, and the reason for failure.



2. Load Multiple Files In Parallel

In the examples above, files were added sequentially, one by one.

Ideally, you would want to load all of your files at once in parallel. This makes it so you are able to add multiple files as fast as the browser will allow. Parallel loading also allows you to set if there are any file dependencies.

Using the files from the examples above, this can be done like so.

For parallel loading, the parameter supplied to the ‘Resources.load‘ function is an object that is made up of the following properties.



3. Load Multiple Files In Parallel With Dependencies

The ‘wait‘ property is a great way to manage file dependencies. When the ‘wait‘ property is set to true, that indicates that the file should be completely loaded before loading subsequent files in the group.

This makes it so loading files in parallel does not cause files to be loaded before its dependent files.

The following examples demonstrates the ‘wait‘ functionality when loading files in parallel.

The example below demonstrates what happens when ‘wait‘ is not used. Load order behavior is undefined because files are loaded as they become available. This could cause an issue if the second file depends on the first file, but loads before it.

In the example below, the ‘wait‘ property is set to true for the first file, ensuring that it will always be loaded before any subsequent files.



4. Load A JavaScript Function From Another JS File

Resources.load‘ could be used to call a JavaScript function in another js file. The example below demonstrates this.

In the following example, main.html is the ‘driver’ file. It loads ‘fullName.js‘ to get the functions located in that file. ‘fullName.js‘ then uses ‘Resources.load‘ to load the files ‘display.js‘, ‘log.js‘ and ‘date.js‘, and calls the functions from those files to display information.

Below is fullName.js

Below is display.js

Below is log.js

Below is date.js



5. Resources.js Namespace

The following is the Resources.js Namespace. Include this in your project to start using!



6. More Examples

Below are more examples demonstrating the use of ‘Resources.load‘. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Was this article helpful?
👍 YesNo

Leave a Reply