JavaScript Dynamic Loading

0

0.1

1

Jakob Nielsen 10

Heavy loading Quick response

<html>
<head>
<script src=”loader.js”></script>
<script>
document.onload = function() {
/* do loading */
};
</script>
</head>
</html>

XHR + eval

var xhrObj = new XMLHttpRequest();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState == 4 ) {
eval(xhrObj.responseText);
}
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');

XHR + injection
function() {
var scriptElem = document.createElement('script');
var headElem = document.getElementsByTagName('head')[0];
headElem.appendChild(scriptElem);
scriptElem.text = xhrObj.responseText;
}
};
xhrObj.send('');

dom element

scriptElem.type= 'text/javascript';
scriptElem.src = 'http://anydomain.com/A.js';


dom element (not execute)

scriptElem.type= 'text/html';


XHR

function() {
/* eval or injection */

/* JavaScript onload */
}
};

xhrObj.send('');

dom element


scriptElem.onload = function() { /* JavaScript onload */ };

document.getElementsByTagName('head').appendChild(scriptElem);

with IE :)

scriptElem.onload = function() {
if ( !scriptElem.onloadDone ) {
scriptElem.onloadDone = true;
}
};
scriptElem.onreadystatechange = function() { /* for IE */
if ( xhrObj.readyState == 4 || xhrObj.readyState == 2 ) {
if ( !scriptElem.onloadDone ) {
scriptElem.onloadDone = true;
}
}
};

document.getElementsByTagName('head').appendChild(scriptElem);

The three things you should know

JavaScript Dynamic Loading

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Más de Tomokazu Kiyohara

Más de Tomokazu Kiyohara (15)

JavaScript Dynamic Loading

Notas del editor