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

Creating a cascading layout with React Material-UI GridList

Changing the color of the timePicker clock in material-ui: a step-by-step guide

Creating a clickable link that dynamically updates based on the span and id values, and opens in a new browser tab

The incorporation of zoom disrupts the smooth scrolling capability of the menu

Tips for Validating a Strongly Typed View in MVC3 without Using a Model

The float right attribute doesn't stay contained within the box; instead, it drifts outside the box

Swap out the image backdrop by utilizing the forward and backward buttons

What is the procedure for invoking a function when the edit icon is clicked in an Angular application

What is the best way to convert this JavaScript iteration function into jQuery?

Guide to triggering a change event on a react-number-format component

The success callback in JQuery Ajax does not function properly when constructing an array of Ajax calls

What is the proper method for effectively employing destructuring?

Formatting issue with selecting checkboxes in Primefaces DataTable filter menu

Emphasize a passage by clicking on a different section of text

There seems to be an issue with configuring placeholders in Tailwind CSS

Inaccurate AJAX response mentioned

Tips for adjusting the initial scale to ensure your mobile website fits perfectly on the screen

Is it possible to include parameters in an HTML GET request with Electron.Net?

Encountering an unexpected token ';' in a random generator while attempting to utilize an if-else statement for determining DOM manipulation

Prepare the writing area for input