add preload API so that Boxzilla JS API can be used before Boxzilla script itself has loaded. This also allows us to defer the Boxzilla script itself, allowing for a nice performance improvement:

Author: dannyvankooten

assets/js/preload.js

@@ -0,0 +1,13 @@
+var boxzilla_queue = []
+
+// create a temporary global Boxzilla object
+// this allows these methods to be called before the Boxzilla script itself has loaded
+var Boxzilla = {};
+['on', 'off', 'toggle', 'show'].forEach((m) => {
+  Boxzilla[m] = function () {
+    boxzilla_queue.push([m, arguments])
+  }
+})
+
+window.Boxzilla = Boxzilla
+window.boxzilla_queue = boxzilla_queue

assets/js/script.js

@@ -125,6 +125,14 @@
   // init boxzilla
   Boxzilla.init()
 
-  // on window.load, create DOM elements for boxes
-  window.addEventListener('load', createBoxesFromConfig)
+  window.addEventListener('load', () => {
+    // create JS objects for each box
+    createBoxesFromConfig()
+
+    // fire all events queued up during DOM load
+    window.boxzilla_queue.forEach((q) => {
+      const [method, args] = q
+      Boxzilla[method].apply(null, args)
+    })
+  })
 })()

assets/js/src/preload.js

@@ -30,6 +30,7 @@
 defined('ABSPATH') or exit;
 
 define( 'BOXZILLA_FILE', __FILE__ );
+define( 'BOXZILLA_DIR', __DIR__ );
 define( 'BOXZILLA_VERSION', '3.3.1' );
 
 require __DIR__ . '/autoload.php';

assets/js/src/script.js

@@ -38,12 +38,23 @@ public function init() {
 		$this->box_ids_to_load = $this->filter_boxes();
 
 		// Only add other hooks if necessary
+		add_action('wp_head', array($this, 'print_preload_js'));
 		if ( count( $this->box_ids_to_load ) > 0 ) {
 			add_action( 'wp_footer', array( $this, 'print_boxes_content' ), 1 );
 			add_action( 'wp_enqueue_scripts', array( $this, 'load_assets' ), 90 );
 		}
 	}
 
+	/**
+	 * Prints the preload API so that the Boxzilla JS API can be used before Boxzilla itself is loaded
+	 * This allows us to defer the Boxzilla script itself.
+	 */
+	public function print_preload_js() {
+		echo '<script>';
+		echo file_get_contents(BOXZILLA_DIR . '/assets/js/preload.js');
+		echo '</script>';
+	}
+
 	/**
 	 * Get global rules for all boxes
 	 *
@@ -248,7 +259,10 @@ private function filter_boxes() {
 	*/
 	public function load_assets() {
 		wp_enqueue_style( 'boxzilla', $this->plugin->url( '/assets/css/styles.css' ), array(), $this->plugin->version() );
-		wp_enqueue_script( 'boxzilla', $this->plugin->url( '/assets/js/script.js' ), array(), $this->plugin->version(), true );
+		wp_enqueue_script( 'boxzilla', $this->plugin->url( '/assets/js/script.js' ), array(), $this->plugin->version(), array(
+			'strategy' => 'defer',
+			'in_footer' => true,
+		));
 
 		// create boxzilla_Global_Options object
 		$plugin_options = $this->options;

boxzilla.php

@@ -3,7 +3,8 @@ const path = require('path')
 module.exports = {
   entry: {
     'admin-script': './assets/js/src/admin-script.js',
-    script: './assets/js/src/script.js'
+    script: './assets/js/src/script.js',
+    preload: './assets/js/src/preload.js'
   },
   output: {
     filename: '[name].js',