Tip: Javascript late-loading trick

Having issues with javascript dependencies or awkwardly structured html defining objects you need before run?

This is a little trick I used combined with csnover’s roundrect.js to provide IE versions < 9 with border-radius rounded corners.

Create a separate source file e.g. mylateloader.js and in it include the following code :-

function myInArray(needle, haystack) {
    var length = haystack.length;
    for(var i = 0; i < length; i++) {
        var str = jQuery(haystack[i]).attr('src');
        if(typeof(str) != 'undefined' && str.search('.*'+needle+'.*') > -1) return str;
    }
    return false;
}

jQuery(document).ready(function(){
    var script = document.createElement('script');
    url = myInArray('mylateloader.js', document.getElementsByTagName('script'));
    script.src = url.replace('mylateloader.js','mycoolminifiedfile.min.js');
    document.getElementsByTagName('head')[0].appendChild(script);
    setTimeout("mycoolobject.run()",2000);
})

That way, at document.ready(), mycoolminifiedfile.min.js is loaded from the same directory on the server as the late loader js and 2 seconds later, the mycoolobject.run() is called.