Load JS script after page loads, and once script is loaded, execute more jQuery

Load script after page finishes loading, then once script is done loading, do something else.

by Allen N.

HTML

<div class="box">
  <p>Hi white box,
  <span>turn blue after page is loaded. NOT seen, next step happens quick. 
  <br><br>
  Then, turn green after JS file loads</span></p>
</div>

CSS

body {
  background: #101;
  color: #101;
  padding: 20px;
  font-family: Helvetica;
}

.box {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 1000ms;
  margin: 0 auto;
  width: calc(100% - 40px);
  top: 50%;
  position: relative;
}

.box.page-Loaded {
  background: #10ADED;
}

.box.js-Loaded {
  background: #BADA55;
}

.box span {
  display: block;
  margin-top: 16px;
  font-size: 16px;
}

JavaScript

jQuery(function($){
    // Use jQuery code here with $ formatting.
    // Executes BEFORE page finishes loading.
});

jQuery(document).ready(function($){
    // Use jQuery code here with $ formatting.
    // Executes AFTER page finishes loading.
        
    $('.box').addClass('page-Loaded');
    
    $.getScript('https://cdn.jsdelivr.net/jquery.glide/1.0.6/jquery.glide.min.js', function() {
        // Executes AFTER main.js file is loaded.
        
        // Comment out next line to see that box does turn blue after page loaded.
        $('.box').addClass('js-Loaded');
    });
});