CODEWITHSUNDEEP
javascript
TarranJones
TarranJones

Reputation: 4242

What do these two onload methods have a different approach & which is better

I was just writing an onload function when I stumbled across loadCSS. Its onloadcss function works in a different way.

My function

var onLoadElement = function(element, callback) {

    if (element.addEventListener) {
        element.addEventListener("load", callback, 0);
    } else if (element.readyState) {
        element.onreadystatechange = callback;
    } else {
        element.onload = callback;
    }
}

loadcss's function

function onloadCSS( ss, callback ) {
    ss.onload = function() {
        ss.onload = null;
        if( callback ) {
            callback.call( ss );
        }
    };
    // No support for onload:
    // Weak inference targets Android < 4.4
    if( "isApplicationInstalled" in navigator && "onloadcssdefined" in ss ) {
        ss.onloadcssdefined( callback );
    }
}

Clearly it has added android support but I am unclear of why ss.onload= callback is not used instead of the following snippet. 

 ss.onload = null;
 if( callback ) {
     callback.call( ss );
 }

I've tried to tweak my function to include the non support for .onload but I would like to know whether to modify it further. 

var onLoadElement = function(element, callback) {

    if (element.addEventListener) {
        element.addEventListener("load", callback, false);
    } else if (element.readyState) {
        element.onreadystatechange = callback;
    } else if(element.onload){
        element.onload = callback;
    } else if( "isApplicationInstalled" in navigator && "onloadcssdefined" in element ) {
        element.onloadcssdefined( callback );
    }
}

Update

Thanks Mike-C for your answer, I now understand its loadCSS's approach could be to save on memory.

So in theory this could reduce memory usage and have better browser support?? 

var onLoadElement = function(element, callback) {

    if(typeof callback !== 'function') return;

    if (element.addEventListener) {
        var cb = function(){
            callback.call( element );
            element.removeEventListener("load", cb)
        }
        element.addEventListener("load", cb, false);
    } else if (element.readyState) {
        element.onreadystatechange = function(){
            element.onreadystatechange = null;
            callback.call( element );
        }
    } else if(element.onload){
        element.onload = function(){
            element.onload = null;
            callback.call( element );
        }
    } else if( "isApplicationInstalled" in navigator && "onloadcssdefined" in element ) {
        element.onloadcssdefined( callback );
    }
}

Good or bad idea?

Upvotes: 0

Views: 99

Answers (1)

Mike Cluck
Mike Cluck

Reputation: 32531

Their approach handles older browsers (all of the if(element.addEventListener) stuff) and removes the event handler after the load completes. This may save on memory as it allows the callback and event handler to be garbage collected.

Update:

Yes, your new approach now handles older browsers and should save memory since you don't have dangling event handlers.

Upvotes: 1

Related Questions