loadScript/loadScripts - Dependency Functions

loadScript and loadScripts is used pull in Javascript dependencies without duplicating them on any given page.

Code

// Load Script + CallbackfunctionloadScript(src,callback=null){// Return if no argumentsif(!src){return;}// Varsconstscript=document.querySelector(`script[src^="${src}"]`);constaddLoadEvent=(el)=>{el.addEventListener("load",function(){this.readystate=true;if(callback){callback();}});};// Add Scriptif(!script){// Script doesn't exists, create script elementconstel=Object.assign(document.createElement("script"),{
src,readyState: false,});// Append script to document headdocument.head.appendChild(el);// Load EventaddLoadEvent(el);}else{// If script exists in DOM, but not yet loaded.if(script.readystate===false){addLoadEvent(script);}else{if(callback){callback();}}}}// Load ScriptsfunctionloadScripts(scripts){scripts=Array.isArray(scripts) ? scripts : [scripts];scripts.forEach((script)=>loadScript(script));}

loadScript

Parameters

• src String. required. A string that specifying the url to Javascript Dependency.
• callback Function. optional. The callback function to be triggered after the dependency has been fully loaded to the Document Head.

loadScripts

Parameters

• scripts String|Array. **A list of scripts to be added to the Document Head.

Example

Below is one example where a person would have 3 different components on a particular page that all use the same Google Map JS Dependency. Instead of including it in footer.js file and bulking up the size of file, you may only add the dependency to needed pages like so. The loadScript function will prevent the dependency from being added 3 different times to the page and allow for callback after the dependency has been loaded. In the below example, [https://maps.googleapis.com/maps/api/js?key=AIzaSyByeQbLyI4ktuhHvgDcga9dtVx-Kvnyy2M](https://maps.googleapis.com/maps/api/js?key=AIzaSyByeQbLyI4ktuhHvgDcga9dtVx-Kvnyy2M) will only be added once to page.

Page

<p>Explore accredited online colleges with our comprehensive database of online programs. Sort the results based on criteria like degree level, location, and program preference to find the schools that best meet your needs.</p>
{% google_map %}
<h2>Find your School</h2><p>Find Accredited Online Colleges in our School Database Explore accredited online colleges with our comprehensive database of online programs. Sort the results based on criteria like degree level, location, and program preference to find the schools that best meet your</p>
{% algolia_ipeds %}
<h2>Wheres Waldo in the US</h2>
{% wheres_waldo %}

Google Map Component

HTML// Google MapsvaraddGoogleMaps=function(){
...
}loadScript("https://maps.googleapis.com/maps/api/js?key=AIzaSyByeQbLyI4ktuhHvgDcga9dtVx-Kvnyy2M",addGoogleMaps)

Algolia Component with Google Map

HTMLvaraddAlgoliaMap=function(){
...
}loadScript("https://maps.googleapis.com/maps/api/js?key=AIzaSyByeQbLyI4ktuhHvgDcga9dtVx-Kvnyy2M",addAlgoliaMap)

Where's Waldo Component

HTMLloadScripts(['https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.js','https://cdnjs.cloudflare.com/ajax/libs/adblock-detect/1.0.5/index.min.js','https://maps.googleapis.com/maps/api/js?key=AIzaSyByeQbLyI4ktuhHvgDcga9dtVx-Kvnyy2M',]);