Home/ Questions/Q 913643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T17:35:40+00:00

When using an importjs() type of function (see below for an example), jQuery doesn’t

  • 0

When using an importjs() type of function (see below for an example), jQuery doesn’t seem to be loading before the code following it.

Here’s a sample html file:

<html>
  <head></head>
  <body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      function importjs(jsFile) {
        var body = document.getElementsByTagName('head').item(0);
        var scpt = document.createElement('script');
        scpt.src = jsFile;
        scpt.type = 'text/javascript';
        body.appendChild(scpt);
      }
      var f1="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
      //importjs(f1);
      var $j=jQuery;
      alert("hello stackoverflow!");
    </script>
  </body>
</html>

With the above code, the alert should successfully fire.

Next, comment out the first script block, i.e. the one explicitly loading jQuery, and uncomment the importjs(f1) line in the second script block. This time, the alert does not fire, at least in firefox and safari.

Now, put in an extra alert before the line “var $j=jQuery”. For me, it works in both browsers, regardless of how long or short I wait. A setTimeout would probably also do the trick, but it’s also not an ideal way to program something like this.

If javascript is single-threaded, why does the importjs fail? Is it because the new element created by importjs doesn’t get ‘executed’ until the first block finishes, or should the new element be executed as soon as it is created?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are several problems here:

    • you have jQuery duplicated, one in the html, one in the js

    • dynamically added javascript won’t be available immediately
      if you load scripts this way the dependant code should be in a callback function

      function importjs(jsFile, callback) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = jsFile;
    script.type = 'text/javascript';
    script.onload = script.onreadystatechange = function() {
      // execute callback
      if (callback) callback();
      // prevent memory leak in IE
      script.onload = null;
      head.removeChild(script);
    };
    head.appendChild(script);
}

      then you should use it as:

      importjs("jquery.js", function(){
    // all jQuery dependant code
    // goes here...
});​

    UPDATE

    There is a more robust solution for including javascript files which allows you to:

    • include multiple files that are related
    • ensure they are executed in order
    • load them in a non-blocking way (parallel with other resources)

    I’m still working on this script, but pretty much works right now. Be sure to check it out.

    It combines the advantages of different techniques to give a huge benefit on page load time. Here is a related article: Loading Scripts Without Blocking

    The syntax is:

    include(['jquery.js','jquery-ui.js'], myjQueryCode); // executed in order
    • 0