What happens when dynamically loaded static resources are loaded?

Question

What happens when dynamically loaded static resources are loaded?

Currently, I am dynamically injecting HTML into a page using JQuery AJAX. The injected HTML contains script and link tags for JS and CSS files respectively. The issue I am facing is that my initPage() function runs before the script containing its definition has finished loading.

Below is an example of the HTML received from the AJAX call:

<script type='text/javascript' src='//domain.com/js/fillip.js'></script>
<script type='text/javascript' src='//domain.com/js/fillip2.js'></script>
<link href='//domain.com/css/fillip.css' rel='stylesheet'>

<iframe src='//domain.com/mypage'></iframe>
<script type='text/javascript'>
    $(function(){
        initPage();
    });
</script>

I am looking for a solution to execute additional JavaScript only after all scripts have been loaded, with the flexibility to handle varying numbers of required script and CSS file dependencies. Bonus points if the solution can also accommodate waiting for CSS files to load.

How can I ensure all necessary dynamic JS/CSS files are loaded before proceeding with the rest of my JavaScript code?

javascript jquery html css ajax

Answer 1

Answer №1

Scripts defined in the 'head' section of a document are processed in the order they are listed.

If you have a function call to init at the end of your document, enclose it like this:

$(document).ready(function() {
  initPage();
}

Another method is to load scripts sequentially by adding them one by one to the document using a control mechanism.

function loadMyJavaScript(jsPath, cb) {
  var loaded = false;

  // Create script element and add it to document head
  var script = document.createElement('script');

  script.onload = successHandler;
  script.error  = errorHandler;
  script.onreadystatechange = stateHandler;

  script.src = path;
  document.getElementsByTagName("head")[0].appendChild(jsScript);

  function successHandler() {
      if ( false == loaded ) {
           loaded = true;
           cb(path, "success"); 
      }
  }

  function errorHandler() {
      if ( false == loaded ) {
          loaded = true;
          cb(path, "error");
      }
  }

  function stateHandler() {
      var status;
      if ( false == loaded ) {
         status = script.readyState;
         if ( status === "complete" ) {
            successHandler();
         }
      }
  }
}

You can then call this function and assign a callback as shown below:

loadMyJavaScript("http path of the script", function(path, status) {
     if ( status == "success") {
        Load another script or call initPage();
    }

});

Answer 2

Scripts defined in the 'head' section of a document are processed in the order they are listed.

If you have a function call to init at the end of your document, enclose it like this:

$(document).ready(function() {
  initPage();
}

Another method is to load scripts sequentially by adding them one by one to the document using a control mechanism.

function loadMyJavaScript(jsPath, cb) {
  var loaded = false;

  // Create script element and add it to document head
  var script = document.createElement('script');

  script.onload = successHandler;
  script.error  = errorHandler;
  script.onreadystatechange = stateHandler;

  script.src = path;
  document.getElementsByTagName("head")[0].appendChild(jsScript);

  function successHandler() {
      if ( false == loaded ) {
           loaded = true;
           cb(path, "success"); 
      }
  }

  function errorHandler() {
      if ( false == loaded ) {
          loaded = true;
          cb(path, "error");
      }
  }

  function stateHandler() {
      var status;
      if ( false == loaded ) {
         status = script.readyState;
         if ( status === "complete" ) {
            successHandler();
         }
      }
  }
}

You can then call this function and assign a callback as shown below:

loadMyJavaScript("http path of the script", function(path, status) {
     if ( status == "success") {
        Load another script or call initPage();
    }

});

What happens when dynamically loaded static resources are loaded?

How can I ensure all necessary dynamic JS/CSS files are loaded before proceeding with the rest of my JavaScript code?

Answer №1

Similar questions

Restrict printing loops within the designated division layer

Making changes to HTML on a webpage using jQuery's AJAX with synchronous requests

Transforming the output from a processor into an array structure

Update the CSS of a different element when hovering

Is it feasible to use a component in a recursively manner?

Ensuring Proper Alignment of Headers in CSS

Easy steps to automatically disable a checkbox once the expiration date has been reached

CSS code for a fixed fullscreen menu with scrolling

Encountered an error: "Unexpected token < in JSON at position 4" while trying to fetch a link using Ajax

What steps do I need to take to integrate my RASA assistant into my personal website?

Tokenizing with jQuery UI

Having trouble establishing a connection between MongoDB and a Node.js Express server on my local machine

What is the method for assigning a value to a Material UI text field?

Trouble with browser autocomplete/saved form during ajax requests

Converting a LovelySoup AJAX table into JSON Format

The picture won't stay within the confines of the container

Utilizing PHP for Interactive JavaScript Modals

Tips for incorporating a return statement within a network request function that is already returning information pertaining to the request

Chrome is throwing a syntax error with an unexpected token in jQuery replaceWith

Using ng-selected directive along with ng-repeat in a select dropdown