❤
npm
Sign UpSign In

bundleloader

0.0.7 • Public • Published

BundleLoader

It is a common pattern to use tools like browserify to bundle several javascript files from an application together into one large file. This creates a challenge if we want to show a progress bar when the application is loading, since the code for the progress bar can't be bundled with the application itself. This is a kind of chicken or egg problem, the progress bar to load the application can't be bundled with application, because then the application would need to be loaded before the progress bar could be shown.

BundleLoader provides an easy way to load a javascript file and run it, and to show a progress bar while the script is being loaded. It is under 4k in size.

There is room for improvement. There is currently no way to theme the loading bar, it would be nice to have, using CSS for example.

Basic Usage

The basic usage is like this. Here we just tell BundleLoader to load a javascript file. The file will be loaded and automatically executed and then a callback function will be called:

<html>
    <script src="bundleloader.min.js"></script> 
    <script>
        var loader = new BundleLoader();
 
        loader.onload = function() {
            console.log("the script is loaded...");
        }
 
        loader.load("myscript.js");
    </script> 
</html>

More Resources

In the case where there are more resources needed by the loaded bundle, we can still use the loading screen provided by BundleLoader for the sake of consistency. In the following example, we assume that the loaded bundle provides a class called TheApp, which is the main application class. We also assume that this class can dispatch events to signal the completion and progress of the loading of its resources.

<html>
    <script src="bundleloader.min.js"></script> 
    <script>
        var loader = new BundleLoader();
 
        loader.onload = function() {
 
            // Create the application.
            var theApp = new TheApp();
 
            // Updatethe loading bar when the application signals progress.
            theApp.on("loadProgress", function(ev) {
                loader.showProgress("LOADING RESOURCES", 50+ev.percent/2);
            });
 
            // Hide the loader on completion.
            theApp.on("loadComplete", function() {
                loader.hide();
            });
        }
 
        // Let the loading of the bundle represent 50% of the loading bar.
        loader.load("myscript.js", "LOADING", 50);
    </script> 
</html>

Readme

Keywords

none

Package Sidebar

Install

npm i bundleloader

Repository

github.com/limikael/bundleloader

Homepage

github.com/limikael/bundleloader

Weekly Downloads

1

Version

0.0.7

License

ISC

Last publish

Collaborators

  • limikael
Try on RunKit
Report malware