is there any way to _reliably_ load jquery through an XmlHttpRequest?
Dear all
I am trying to load jquery through an xmlhttp request and then inject it into the page. If this is possible, it would speed up parallel page loading and improve the rendering behavior for most browsers. However, it seems that jQuery cannot reliably initialize itself when it is only later injected into the document.
Does anybody have a viable solution/workaround for loading jquery asynchronously and actually uses that technique productively?
It seems that jQuery gets into trouble if it doesn't see the DomContentLoaded event. Maybe this a bit similar to the problem in bug http://dev.jquery.com/ticket/2509. (The workaround from the bug does not improve anything for me, by the way.)
We are still using jQuery 1.3.2 - if anybody has a more stable experience with 1.4 then this information would also be very helpful. Since jQuery is getting bigger and bigger, it would really be very helpful to have a reliable way to pull it into the page asynchronously.
I have tried three different asyncronous loading mechanisms with jquery and none worked reliably in Firefox 3.5.4. I tried: xmlhttprequest+eval, xmlhttprequest+DOM-injected script tag, DOM-injected script node with a specified src URL; I haven't tried other browsers, since I mostly use Firefox during development and it doesn't even work there.
The code that I use to load the code asynchronously is rather simple but it works with other scripts, wheras - if I judge the timing in Firebug's network monitor correctly - jquery seems to always fail to initialize, if domContentLoaded is fired before the jquery script is executed. The most simpe version of the loader code is as follows:
(function(){
try{
var ajax=( window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP") );
ajax.open('GET','/path/to/jquery.js',true);
ajax.onreadystatechange = function(){
if(ajax.readyState==4){
eval(ajax.responseText);
}
};
ajax.send('');
}catch(e){ }
})();