Is jquery uploaded? Is Colorbox available? Does invoking some js file via $ .getScript always load from a web server?

Question

I dynamically load js files using _tumIsler.js (_allStuff.js)

<script src="../js/_tumJsler.js" type="text/javascript"></script> 

He contains:

 // url=> http: + // + localhost:4399 + /yabant/ // ---- ---- -------------- -------- // protocol + "//" + host + '/virtualDirectory/' var baseUrl = document.location.protocol + "//" + document.location.host + '/yabant/'; // If there is "~/" at the begining of url, replace it with baseUrl function ResolveUrl(url) { if (url.indexOf("~/") == 0) { url = baseUrl + url.substring(2); } return url; } // Attaching scripts to any tag function addJavascript(jsname, pos) { var th = document.getElementsByTagName(pos)[0]; var s = document.createElement('script'); s.setAttribute('type', 'text/javascript'); s.setAttribute('src', jsname); th.appendChild(s); } // I want to make sure jQuery is loaded? addJavascript(ResolveUrl('~/js/1_jquery-1.4.2.min.js'), 'head'); var loaded = false; // assume it didn't first and if it is change it to true function fControl() { // alert("JQUERY is loaded?"); if (typeof jQuery == 'undefined') { loaded = false; fTry2LoadJquery(); } else { loaded = true; fGetOtherScripts(); } } // Check is jQuery loaded fControl(); function fTry2LoadJquery() { // alert("JQUERY didn't load! Trying to reload..."); if (loaded == false) { setTimeout("fControl()", 1000); } else { return; } } function getJavascript(jsname, pos) { // I want to retrieve every script one by one $.ajaxSetup({ async: false, beforeSend: function() { $.ajaxSetup({ async: false, cache: true }); }, complete: function() { $.ajaxSetup({ async: false, cache: true }); }, success: function() { // } }); $.getScript(ResolveUrl(jsname), function() { /* ok! */ }); } function fGetOtherScripts() { // alert("Other js files will be load in this function"); getJavascript(ResolveUrl('~/js/5_json_parse.js'), 'head'); getJavascript(ResolveUrl('~/js/3_jquery.colorbox-min.js'), 'head'); getJavascript(ResolveUrl('~/js/4_AjaxErrorHandling.js'), 'head'); getJavascript(ResolveUrl('~/js/6_jsSiniflar.js'), 'head'); getJavascript(ResolveUrl('~/js/yabanYeni.js'), 'head'); getJavascript(ResolveUrl('~/js/7_ResimBul.js'), 'head'); getJavascript(ResolveUrl('~/js/8_HaberEkle.js'), 'head'); getJavascript(ResolveUrl('~/js/9_etiketIslemleri.js'), 'head'); getJavascript(ResolveUrl('~/js/bugun.js'), 'head'); getJavascript(ResolveUrl('~/js/yaban.js'), 'head'); getJavascript(ResolveUrl('~/embed/bitgravity/functions.js'), 'head'); } 

After all these js files have been uploaded, this line is executed to show the UploadFile page inside the page when the button is clicked, where id is "btnResimYukle".

 <script type="text/javascript"> if (jQuery().colorbox) { alert("colorbox exists"); } else { alert("colorbox doesn't exist"); $.ajaxSetup({ cache: true, async: false }); $.getScript(ResolveUrl('~/js/3_jquery.colorbox-min.js'), function() { alert("Loaded ! "); $('#btnResimYukle').live('click', function() { $.fn.colorbox({ iframe: true, width: 700, height: 600, href: ResolveUrl('~/Yonetim/DosyaYukle.aspx') }); return false; }); }); } </script> 

First I want to ask you very nice people, I always call js files with the $ .getScript function. Are they always loaded in every $ .getScript request? And if the answer is yes, how can I prevent this? It works:

 $.ajaxSetup({ cache: true, async: false }); 

Secondly, I always get this error when I press F5 or Ctrl + F5:

But when I press the enter key at the url, there is no error: s

Answer 1

Your loading script adds scripts to the head element, where they will be processed later in the DOM order. This means that they are loaded after the inline script in your head element, so of course you get and expect an object error: jQuery is not defined yet. The best approach is to download only the absolutely necessary scripts in the header - those that are needed to execute your built-in scripts - and move the rest of the scripts, including your built-in scripts, to the end of the body of the document. Thus, all elements of the document can be loaded in parallel, accelerating the loading of the page.

If you do this, I would recommend not loading scripts asynchronously. If you download them synchronously, you will find that you can move them more to the end of the document. Combine the scripts as much as you can to further reduce load times.