JS Skill Finishing

1. Dynamic Scripting elements

varScript = document.createelement (' script '); Script.type= ' Text/javascript '; Script.onload=function(){//Non-IEAlert (' Script loaded ');}; Script.onreadystatechange=function(){//IE    if(Script.readystate = = ' Loaded ' | | script.readystate = = ' complete ') {Script.onreadystatechange=NULL; Alert (' Script loaded '); }};SCRIPT.SRC= ' File1.js ';d Ocument.getelementsbytagname (' head ') [0].appendchild (script);

onReadyStateChange has five values:

Uninitialized	Initial state
Loading	Start download
Loaded	Download complete
Interactive	Data complete download but not yet available
Complete	All data is ready

Compatibility notation for dynamic load scripts

functionLoadscript (url,callback) {varScript = document.createelement (' script '); Script.type= ' Text/javascript '; if(script.readystate) {//IE        if(Script.readystate = = ' Loaded ' | | script.readystate = = ' complete ') {Script.onreadystatechange=NULL;        Callback (); }    }Else{script.onload=function(){//Non-IEcallback ();    }; } script.src=URL; document.getElementsByTagName (' head ') [0].appendchild (script);}

Here's how to use it:

Loadscript (' file1.js ',function() {    alert (' file is loaded! ') );}); Loadscript (' file1.js ',function() {    loadscript (' file2.js ',function() {        loadscript (' file3.js ',function() {            alert (' All Files is loaded! ') );        });    });});

XMLHttpRequest Script Injection

 var  xhr = new   XMLHttpRequest (); Xhr.open ( ' get ', ' file1.js ', true   = function   () { if  (readyState = = 4) { if  (xhr.status >= && Xhr.status < | | xhr.status = 304 var  script = document.createelement (' script ' ;            SCRIPT.SRC  = Xhr.responsetext;        Document.body.appendChild (script); }    }}

Request a JS file via get. An HTTP status code of 2XX indicates a valid response, and 304 reads from the cache
The downside is that the code does not support cross-domain, and this method is not available for files that take CDN

The common tool for dynamically loading JS can be obtained at the following address

https://github.com/rgrove/lazyload/

Here's how to use it:

Lazyload.js (' file1.js ',function() {    alert (' file is loaded ');}); // load multiple files sequentially Lazyload.js ([' 1.js ', ' 2.js '],function() {    alert (' file is loaded ');});

The second Kind

Labjs

http://labjs.com/

Examples of usage

$LAB. Script (' file.js '). Wait (function() {    // initialize }); // The lab script method is used to download a file, and the wait method is used to specify the function that is called after the file is downloaded and executed. Supports chained calls $LAB. Script (' 1.js ').    script (' 2.js ')    . Wait (function() {         // initialize    });

In the preceding example, 1.js does not necessarily guarantee a call before 2.js. Make sure this is the way you write it.

$LAB. Script (' 1.js '). Wait ()    . Script (' 2.js ')    . Wait (function() {         // initialize    });

The above is a better way to dynamically load JS, and will not block the browser!

Examples and explanations refer to the first chapter of high-performance JavaScript

JS Skill Finishing