JSLoader, handler for onLoad and onReady events

I’ve made a little code snippet to handle the window.onload event the right way, and thanks to some feedback, people said that it would be even better if it could handle the DOMContentLoaded event.

So here it is.

JSLoader

First of all, here’s the code:

var JSLoader = {
    onLoad: function(fn){
        if (window.addEventListener){
            window.addEventListener('load', function() { fn(); },false);
        } else if (window.attachEvent) {
            window.attachEvent('onload', function() { fn(); });
        } else {
            if (window.onload) {
                var curronload = window.onload;
                var newonload = function() {
                    curronload();
                    fn();
                };
                window.onload = newonload;
            } else {
                window.onload = function() { fn(); };
            }
        }
    },
    onReady: function(fn){
        if(document.addEventListener){
        document.addEventListener('DOMContentLoaded', function() { fn(); });
        }else{
            if(document.onreadystatechange){
                var curronready = document.onreadystatechange;
                var newonready = function(){
                    curronready();
                    if(document.readyState == "complete"){
                        fn();
                    }
                };
                document.onreadystatechange = newonready;
            }else{
                document.onreadystatechange = function(){
                    if(document.readyState == "complete"){
                        fn();
                    }
                };
            }
        }
    }
}

How to use it

Adding functions to the window.onload event using the onLoad function:

JSLoader.onLoad(fn1);
JSLoader.onLoad(fn2);
or even:
JSLoader.onLoad(function(){
    fn1();
    fn2();
});

Same thing happens with the DOMContentReady event using the onReady function:

JSLoader.onReady(fn1);
JSLoader.onReady(fn2);
or even:
JSLoader.onReady(function(){
    fn1();
    fn2();
});

Really simple and useful.

I have uploaded an improved version of this to GitHub, you can download it there, along with the index.html file used to create a small example.

The improved version is a plugin that can load JavaScript and Css files dynamically, and you can set a callback function to run after the files are loaded.

Hope you like it, and don’t forget to subscribe.

If you have any doubt, just leave a comment bellow or say something in facebook or twitter.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s