Javascript load external frameworks after onReady

Question

Usually you have all your frameworks (scripts and css) in your head element on your HTML source code and while rendering the page they will be loaded. E.g. I want to load jQuery and boostrap it would look something like this:

<html>
  <head>
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <link href="jquery.min.css"\>
    <link href="bootstrap.min.css"\>
  </head>
</html>

But imagine a situation where you have only jQuery loaded from the beginning and you want to perform a action like clicking on a button and need some framework functionalities like something that bootstrap offers, they would need to be loaded right after the click.

In my understanding that is not as easy as it sounds since the framework which needs to be loaded after the side was already rendered needs to perform an OnReady call. Is there any simple way to achieve this?

Kind regards, Marius

the best practice is for scripts to go at the end of the body tag, not in the head — John Vandivier, Apr 04 '17 at 12:38
You can trigger those calls manually like `$(document).trigger('ready')` — Fabian Horlacher, Apr 04 '17 at 12:39
Package a views/page required files into a bundle and load that? Would the use of `RequireJs` help? Is there a concrete question? Or an example you can write up to demonstrate your issue? — Nope, Apr 04 '17 at 12:39
jQuery has a method called `$.getScript(path, callback)`. You can use that to do what you are looking for. https://api.jquery.com/jquery.getscript/. You could make something similiar for the CSS, appending it to the head and giving a little timeout to ensure the loading. — kosmos, Apr 04 '17 at 12:42
`In my understanding that is not as easy as it sounds` - First SO I came across looking for `load JavaScript after click` ► [**loading javascript file after jquery.ready**](http://stackoverflow.com/questions/13993748/load-javascript-file-after-button-click) — Nope, Apr 04 '17 at 12:46
unfortunately that is not working for me https://jsfiddle.net/uvyetrcb/2/ — marius, Apr 04 '17 at 13:06
A +1 as this is an important topic when dealing with page speeds and async loading of scripts. — Shakti Phartiyal, Apr 04 '17 at 13:57

score 0 · Answer 1 · answered Apr 04 '17 at 12:40

"imagine a situation where you have only jQuery loaded from the beginning and you want to perform a action like clicking on a button and need some framework functionalities like something that bootstrap offers, they would need to be loaded right after the click."

What you are describing is lazy loading of dependencies.

RequireJS does this very well.

Shakti Phartiyal · Answer 2 · 2017-04-04T13:56:31.927

If you are thinking to do this to speed up the user's page load performance you can simply use the async property of the the tag like so:

<script src="jquery.min.js" async></script>

Read more about async loading at https://css-tricks.com/thinking-async/

If you have other reasons to load js after a certain event then use the following approach:

function loadJavaScript(url)
{
    var s = document.createElement('script');
    s.setAttribute('src', url);
    s.setAttribute('async',true);
    document.head.appendChild(s);
}

you can pass the address of the script as loadJavaScript('https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js')

UPDATE

Using the onload handler to call a function when the script loads:

$(document).ready(function() {
 $('#test').click(function() {
   console.log("oO");
    loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
    loadJavaScript('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js',function(){
    $('.selectpicker').selectpicker('refresh');
    });
  });
});


function loadCss(url,fn) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}

function loadJavaScript(url)
{
    var s = document.createElement('script');
    s.setAttribute('src', url);
    s.setAttribute('async',false);
    if(typeof(fn) == "function")
    {
      fn();
    }
    document.head.appendChild(s);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test" type="button" class="btn btn-primary">Basic</button>
<select class="selectpicker">
<option>1</option>
</select>

Hey, thanks for the fast answer, unfortunately this is not working for me, i did a small testcase: https://jsfiddle.net/uvyetrcb/1/ — marius, Apr 04 '17 at 12:58
@marius I got your concern so in that case you will have to use the onload handler let me update the answer for you. — Shakti Phartiyal, Apr 04 '17 at 13:53
unfortunately still not :/ the command $('.selectpicker').selectpicker('refresh'); usually should change the apperiance of the select field once called, in this example it doesnt, its part of the bootstrap-select framework — marius, Apr 04 '17 at 15:23

Javascript load external frameworks after onReady

2 Answers2