Lazy loading javascript

Question

What is the main difference between these three ways for lazy loading js or ondemand loading and why?

script 1:

$.getScript = function(url, callback, cache){ $.ajax({ type: "GET", url: url, success: callback, dataType: "script", cache: cache }); }; 

Script2:

 function require(file, callback) { var script = document.getElementsByTagName('script')[0], newjs = document.createElement('script'); // IE newjs.onreadystatechange = function () { if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') { callback(); } }; // others newjs.onload = function () { callback(); }; newjs.src = file; script.parentNode.insertBefore(newjs, script); } document.getElementById('id').onclick = function () { require('ondemand.js', function () { extraFunction('loaded from the parent page'); document.body.appendChild(document.createTextNode('done!')); }); }; 

Script3:

 $L = function (c, d) { for (var b = c.length, e = b, f = function () { if (!(this.readyState && this.readyState !== "complete" && this.readyState !== "loaded")) { this.onload = this.onreadystatechange = null; --e || d() } }, g = document.getElementsByTagName("head")[0], i = function (h) { var a = document.createElement("script"); a.async = true; a.src = h; a.onload = a.onreadystatechange = f; g.appendChild(a) }; b;) i(c[--b]) }; 

Answer 1

• Uses ajax to load the script. More specifically, it uses XHR to load some js and browser accessibility. No blocking is done. He still applies the same origin policy.
• Changes the title to insert a new .js file by creating a <script/> element. It also does not block the browser when the page loads.
• Does the same as # 2, but seems to support an array of scripts. It also sets async to true, which does not cause blocking. The for loop is simply more confusing because it creates a lot more anonymous methods.

Answer 2

• It seems to return a script using XmlHttpRequest and eval() . This will not work if the script is not hosted on the same protocol / domain / port.

• and 3. Both seem to do the same: they create the <script src="the script url"></script> element, bind the onload events with it, and paste it into the page. The script is executed by the browser after it is loaded, and the onload event is onload .

Answer 3

• Gets a script through ajax and eval() content
• Insert the script element into the head element and report back when it loaded
• Same as (2), but accept script arrays as well, and this is a more complicated entry

(2) and (3) both use the onreadystatechange hook, which may not be compatible with older browsers (e.g. Firefox 3.x and below does not support it).

(1) is probably the most reliable, compatible, because it just requires XHR. But if you get errors in the code you download, the browser console may not be very useful, as the error just occurred in the "eval'd code", and not in a specific file / line. However, lazy loading is usually an optimization, so you can simply include scripts normally or with any of the other two methods when debugging.

Answer 4

You should try this new library called head.js

they have some interesting ideas and apis .. hope this helps.

or what you can do is use a regular xhr request to get the script file names, and use a method like this to insert into dom. I also added the removeScript part.

 addScript = function(file) { var headID = document.getElementsByTagName("head")[0]; var newScript = document.createElement('script'); newScript.type = 'text/javascript'; newScript.src = file; headID.appendChild(newScript); }; removeScript = function(file) { var headID = document.getElementsByTagName("head")[0].children; for(var i in headID) if(headID[i].tagName == "SCRIPT") if(headID[i].getAttribute('src') == file) headID[i].parentNode.removeChild(headID[i]); } 

if you use a library like jquery you don't have to worry about anything, you can get html or script markup from the server and use .html () api to paste it into dom