Dynamic Loading of js files as needed

Dynamic Loading of js files as needed

To speed up page opening and loading, we often put JS files at the end of the page, but some JavaScript files must be placed at the front of the page, which will increase the page loading time; therefore, the concept of Dynamic Loading on demand emerged. This concept is to request these files when the JS file or CSS rendering file is used on the page, this saves the page loading time.

LABjs is a small JavaScript tool used to load JavaScript files as needed. Using this tool can improve page performance and avoid loading unnecessary JavaScript files, you can dynamically and concurrently load script files and manage the execution sequence of loaded script files.

Simple Example

?

1 2 3 4 5 6 7 8

$ LAB . Script ("script1.js", "script2.js", "script3.js ") . Block (function (){ // Wait for all to load, then do something Script1Func (); Script2Func (); Script3Func (); });

This section describes several examples of LABJS:

Instance 1:

?

1 2 3 4 5 6 7 8 9

$ LAB . Script ("script1.js ") . Script ("script2.js ") . Script ("script3.js ") . Wait (function () {// wait until all scripts are loaded before executing this code block Script1Func (); Script2Func (); Script3Func (); });

Instance 2:

?

1 2 3 4 5 6 7 8 9

$ LAB . Script ({src: "script1.js", type: "text/javascript "}) . Script ("script2.js ") . Script ("script3.js ") . Wait (function () {// wait until all scripts are loaded before executing this code block Script1Func (); Script2Func (); Script3Func (); });

Instance 3:

?

1 2 3 4 5 6 7

$ LAB . Script ("script1.js", "script2.js", "script3.js ") . Wait (function () {// wait until all scripts are loaded before executing this code block Script1Func (); Script2Func (); Script3Func (); });

Instance 4:

?

1 2 3 4 5 6 7

$ LAB . Script (["script1.js", "script2.js"], "script3.js ") . Wait (function () {// wait until all scripts are loaded before executing this code block Script1Func (); Script2Func (); Script3Func (); });

Instance 5:

?

1 2 3 4 5 6

$ LAB . Script ("script1.js"). wait () // empty wait () only ensures that script1 is executed before other code . Script ("script2.js") // script2 and script3 depend on script1 . Script ("script3.js"). wait () // But script2 and script3 are not mutually dependent and can be downloaded in parallel . Script ("script4.js") // script4 depends on script1, script2, and script3 . Wait (function () {script4Func ();});

Instance 6:

?

1 2 3 4 5 6 7 8 9

$ LAB . Script ("script1.js") // There is no dependency between script1, script2, and script3, . Script ("script2.js") // You can execute it in any order. . Script ("script3.js ") . Wait (function () {// if needed, you can certainly execute the javascript function here Alert ("Scripts 1-3 are loaded! "); }) . Script ("script4.js") // depends on script1, script2, and script3 . Wait (function () {script4Func ();});

Instance 7:

?

1 2 3 4 5 6 7

$ LAB . SetOptions ({AlwaysPreserveOrder: true}) // sets the wait time between each script. . Script ("script1.js") // script1, script2, script3, and script4 depend on each other . Script ("script2.js") // run the script in sequence after parallel download. . Script ("script3.js ") . Script ("script4.js ") . Wait (function () {script4Func ();});

Instance 8:

?

1 2 3 4 5 6 7 8 9 10 11 12

$ LAB . Script (function (){ // The '_ is_IE' value is true for ie and false for non-ie If (_ is_IE ){ Return "ie. js"; // if it is ie, the js will be loaded } Else { Return null; // The Code will be skipped if it is not ie } }) . Script ("script1.js ") . Wait ();

LABjs Loading Method

Dynamic Loading of script files in LABjs refers to loading external js files in multiple ways during page js script execution (mainly different from html pages through