Delay JavaScript files from loading

Question

I need to delay AngularJS scripts from running so I can set up my application first. I need to initialize the application with ng-app="app". I want to add that attribute to the < body >

< body ng-app="app" >< /body >

 wp_enqueue_script('plugin-setup', plugin_dir_url( __FILE__ ).'js/plugin-setup.js', array('jquery'), null, true);

plugin-set.js

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

After that is set up I can run my Angular Scripts:

class pluginClass{

function pluginInit(){
    add_action( 'wp_enqueue_scripts', array( $this, 'scriptThings' ) );
}

function scriptThings(){
    wp_enqueue_script('angular-core', plugin_dir_url( __FILE__ ).'js/vendor/angular/angular.js', array('jquery'), null, true);
    wp_enqueue_script('angular-resource', plugin_dir_url( __FILE__ ).'js/vendor/angular-resource/angular-resource.js', array('jquery'), null, true);
    wp_enqueue_script('app', plugin_dir_url( __FILE__ ).'js/app.js', array(), null, true);
    wp_enqueue_script('app-controller', plugin_dir_url( __FILE__ ).'js/controllers/app_controller.js', array(), null, true);
    wp_enqueue_script('imagetile-factory', plugin_dir_url( __FILE__ ).'js/resource/imageTile_factory.js', array(), null, true);
}

}

$my_class = new pluginClass;

add_action('init', array($my_class, 'pluginInit'));

Is there a way to delay the Angular scripts from loading within my plugin.php*?

Robert hue · Accepted Answer · 2015-10-16 09:02:28Z

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.

Gareth Gillman · Accepted Answer · 2015-10-16 08:47:23Z

1

change the action to:

add_action('init', array($my_class, 'pluginInit','40'));

That tells the action to run much later in the queue, you could also check if the other script has been enqueued by using wp_script_is e.g.

 $handle = 'plugin-setup.js';
 $list = 'enqueued';
 if (wp_script_is( $handle, $list )) {
  // enqueue scripts here
 }

Hope that points you in the right direction

edited Oct 16, 2015 at 8:47

answered Oct 16, 2015 at 8:12

Gareth Gillman

1,3221 gold badge10 silver badges18 bronze badges

Will this delay from loading?

Robert hue
– Robert hue

2015-10-16 08:32:36 +00:00
Commented Oct 16, 2015 at 8:32
it will make sure it runs the enqueue after the other enqueues above, so it makes sure that the other script is loaded before it loads the angular ones.

Gareth Gillman
– Gareth Gillman

2015-10-16 08:46:42 +00:00
Commented Oct 16, 2015 at 8:46

Add a comment |

Stack Exchange Network

Delay JavaScript files from loading

2 Answers 2

EDIT

Your Answer

Hot Network Questions

Delay JavaScript files from loading

2 Answers 2

EDIT

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions