AsyncLoader

AsyncLoader is a simple and lightweight javascript library of one file that loads CSS and JS asynchronously.

HTML

<script src="https://cdn.jsdelivr.net/gh/asfixia/AsyncLoader/minified/asyncloader.min.js"></script>
    <h1>Example with 3 scripts together, the scripts are loaded only once:</h1>
    <button onclick="loadScriptsWithCallback();">Wait 3 seconds or click the button to make the magic happen.</button>
    <div style="width:200px;height:200px;background-color:gray;" id="draggable" class="ui-widget-content">
        <p>Drag me around after load</p>
    </div>
    <div>
        First resource:  <input type="text" size=70 value="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"/><br>
        Second resource: <input type="text" size=70 value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"/><br>
        Third resource:  <input type="text" size=70 value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/><br>
    </div>
    <h1>Function to run after load.</h1>
<textarea id="txt" style="width: 729px;height: 151px;">
alert("loaded, Now you can drag the square around.");
$( "#draggable" ).draggable();
$( "#draggable" ).css('background-color', 'green');
</textarea>

JavaScript

function loadScriptsWithCallback() {
    var inputs = document.getElementsByTagName('input');
    var resources = [];
    for (var i = inputs.length - 1; i >= 0; i--) {
        var curValue = inputs[i].value;
        if (curValue.length > 0)
            resources.push(curValue);
    }


    AsyncLoader.loadScriptOnce(resources, eval('(function() {' + document.getElementById('txt').value + ' })'));
}

setTimeout(loadScriptsWithCallback, 3000);