LABJS dynamically load JS files on Demand

To improve the opening and loading speed of the page, we often put the JS file in the end of the page, but some JS must be placed in front of the page, which will increase the load time of the page, so there is the concept of dynamic loading on demand, the concept is when the page needs to use this JS file or CSS rendering files, To request these files, thus saving the load time of the page

Labjs is a small JavaScript tool used to load JavaScript files as needed, by using the tool to enhance the performance of the page, to avoid loading JavaScript files that are not needed, and to implement dynamic parallel loading of script files. and manage the execution order of the load 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 scrip T1func (); Script2func (); Script3func (); });

Some examples of the following labjs are introduced:

Example 1:

?

1 2 3 4 5 6 7 8 9

$LAB. Script ("Script1.js"). Script ("Script2.js"). Script ("Script3.js"). Wait (function () {//Waiting for all script to load and then execute this block of code Script1func (); Script2func (); Script3func (); });

Example 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 for all script loads to execute this block of code Script1func (); Script2func (); Script3func ();});

Example 3:

?

1 2 3 4 5 6 7

$LAB. Script ("Script1.js", "Script2.js", "Script3.js"). Wait (function () {//Waiting for all script to load up before executing this code block Script1func (); Script2func (); Script3func (); });

Example 4:

?

1 2 3 4 5 6 7

$LAB. Script (["Script1.js", "Script2.js"], "script3.js"). Wait (function () {//Waiting for all script to load and then execute this code block Script1func (); SCR Ipt2func (); Script3func (); });

Example 5:

?

1 2 3 4 5 6

$LAB. Script ("Script1.js"). Wait ()//Empty wait () just make sure 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 interdependent and can be downloaded in parallel. Script ("Script4.js")//Script4 dependent on SCRIPT1, SC Ript2 and SCRIPT3. Wait (function () {Script4func ();});

Example 6:

?

1 2 3 4 5 6 7 8 9

There is no dependency between $LAB. Script ("Script1.js")//SCRIPT1, Script2, and SCRIPT3,. Script ("Script2.js")//So you can execute it in any order. Script ("Script 3.js "). Wait (function () {//If necessary, of course you can execute JavaScript function alert (" Scripts 1-3 are loaded! "); Script (" Script4.js ")//dependent on SC RIPT1, Script2 and SCRIPT3. Wait (function () {Script4func ();});

Example 7:

?

1 2 3 4 5 6 7

$LAB. SetOptions ({alwayspreserveorder:true})//Set wait between each script. Script ("Script1.js")//Script1, Script2, SCRIPT3, SCRIPT4 Interdependent. Script ("Script2.js")//and sequential execution after parallel download. Script ("Script3.js"). Script ("Script4.js"). Wait (function () {Script4func () ;});

Example 8:

?

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

$LAB. Script (function () {//' _is_ie ' value IE is true, non ie is false if (_is_ie) {return "ie.js";////if IE, this JS will be loaded} else {return n ull; If it is not IE this code will be skipped}}. Script ("Script1.js"). Wait ();

LABJS Loading mode

LABJS Dynamic Loading script file, refers to the page of the JS script execution, through a variety of methods to load external JS (mainly different from the HTML page, through