How JS file can be download programmatically

Question

most of the time we include script tag in html head tag. like

 <Head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>

I want that I don't want to include js file path rather I need to download js programmatically by jquery. like i will download js file programmatically from http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js and check if the file can not be download or does not exist then i will download the same file from my site like www.my-site.com/js/1.5.2/jquery.min.js.

please help me to do it using jquery.

Why not just download it from google all the time? And how can we help you with jquery if jquery hasn't been downloaded yet? — Amir Raminfar, Aug 13 '11 at 15:34
You want to download jquery using jquery? You would have to download jquery first :) — JB Nizet, Aug 13 '11 at 15:35
Dupe of http://stackoverflow.com/questions/1014203/best-way-to-use-googles-hosted-jquery-but-fall-back-to-my-hosted-library-on-goo — Varun Madiath, Aug 13 '11 at 15:40
Maybe I'm missing something, but if you're trying to load jquery in the first place you will have to use plain old javascript to load the files until jquery has been loaded. You could probably do this using standard XHR and injecting the file contents into a script tag. Is there a reason you want to favor google's reference vs your own? Edit: jquery recursive dependency already mentioned above :) — nebs, Aug 13 '11 at 15:42

Pir Abdul · Accepted Answer · 2011-08-13T15:53:27.393

4

I think you want to add script programmetically. This following mechanism allows the rendering engine to immediately render and display the initial view defined in HTML while the JavaScript resources are still being loaded and executed which leads to better user experience

      function loadScript(src, callback) {
    var head = document.getElementsByTagName('head')[0],
        script = document.createElement('script');
    done = false;
    script.setAttribute('src', src);
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('charset', 'utf-8');
    script.onload = script.onreadstatechange = function() {
        if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
            done = true;
            script.onload = script.onreadystatechange = null;
                if (callback) {
                    callback();
                }
            }
    }
    head.insertBefore(script, head.firstChild);
}

// load the my-script-file.js and display an alert dialog once the script has been loaded
loadScript('my-script-file.js', function() { ///Loaded, add your javascript here. });

When tags are found in the HTML document the referenced script resources are downloaded and executed before the rendering engine can continue to download other resources which effectively blocks the rendering of the page below the tag. To avoid this blocking behaviour a script tag can be created via a mechanism known as a dynamic script tag injection Reference(http://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/)

edited Aug 13 '11 at 15:53

answered Aug 13 '11 at 15:39

Pir Abdul

2,274
1
26
35

"better user experience" compared to what? – Lightness Races in Orbit Aug 13 '11 at 15:45
this manual jquery include and programmetically adding script. – Pir Abdul Aug 13 '11 at 15:46
Or, you know, you could just include the JS at the *end* of the HTML, like everyone else does, instead of using this ridiculous hack. – Stefan Kendall Aug 13 '11 at 15:49
I don't see how this will make a blind bit of difference to the "user experience". – Lightness Races in Orbit Aug 13 '11 at 15:50
When – Pir Abdul Aug 13 '11 at 15:52
@abdul: You cannot say, as a blanket statement, that this will hurt the "user experience". What if the script is _designed_ for that? Then your approach breaks the experience. – Lightness Races in Orbit Aug 13 '11 at 16:00
This is just community wiki, may be the user using old browsers. – Pir Abdul Aug 13 '11 at 16:01
@Tomalak: Google for "FOUC". It's a common pattern to avoid. – Stefan Kendall Aug 13 '11 at 20:54
@Stefan: FOUC relates to CSS, not Javascript. – Lightness Races in Orbit Aug 14 '11 at 00:50
@Tomalak: I don't think you understand the term. If a large file blocks the rendering of parts of the DOM or the inclusion of CSS, you get unstyled content, or no content at all. – Stefan Kendall Aug 14 '11 at 19:35
@Stefan: I don't think that _you_ understand the term. It relates to CSS, not Javascript. No content at all is not a FOUC. Flashes of unstyled content -- which relates to CSS, not Javascript -- are FOUC. – Lightness Races in Orbit Aug 14 '11 at 19:39

score 3 · Answer 2 · answered Aug 13 '11 at 15:45

following code will solve your problem

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
    if (typeof jQuery == 'undefined') {
       document.write(unescape("%3Cscript src='/Scripts/jquery-1.5.2.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
 </script>

How JS file can be download programmatically

2 Answers2