Delay JavaScript files from loading

I think you should use setTimeout to pause the execution of the script without blocking the UI.

setTimeout(function(){

  //your code to be executed after 2 seconds

}, 2000);

So your code will become.

setTimeout(function(){

    document.addEventListener("DOMContentLoaded", function(event) {
      document.getElementsByTagName("body")[0].setAttribute("ng-app", "app");
    });    

}, 2000);

This will delay script execution for 2 seconds. You can change this value based on your requirements.

EDIT

On second thought, I think it would be better if you check for AngularJS is loaded in the current page before initializing your app.

function checkAngular() {
  if ( window.angular ) {

    // your code to be executed
    document.addEventListener("DOMContentLoaded", function(event) {
      document.getElementsByTagName("body")[0].setAttribute("ng-app", "app");
    });    

  } else {
    window.setTimeout( checkAngular, 1000 );
  }
}
checkAngular();

So what does this code do? It checks if AngularJS is already being loaded successfully. If AngularJS is initialized then it will execute the code otherwise it will delay for 1 sec and check again until AngularJS is loaded.

EDIT

Related Posts: