Fallback procedure to load local jQuery library

Question

In the below code,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Falback procedure</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
        </script>
        <script type="text/javascript">
            window.jQuery || document.write('<script type="text/javascript" src="../localfolder/jquery.js"></script>');
        </script>
    </head>
    <body>
    </body>
</html>

local library is loaded on missing of remote library for unknown reasons.

Do we use such code in production? that enforce a local library on customer's laptop

__Note:__ That `localfolder` __not__ on customer's laptop, its on web-server on which the site is hosted — Satpal, Dec 28 '15 at 07:58
@Satpal you are right!!! My bad. All the `` and `` refer to webserver folder. Thank you for correction — overexchange, Dec 28 '15 at 08:03

Jai · Answer 1 · 2015-12-28T09:38:36.777

1

That is less prone but has chances. So a fallback is always a good idea to have. But in your case that seems a bit strange to me the use of document.write() inside another block of script.

Better to create a script element and append it in head:

<script type="text/javascript">
    if(!window.jQuery){
       var s = document.createElement('script');
           s.src = "../localfolder/jquery.js";
           s.type = "text/javscript";
           s.async = false;  // <--------------------you need to add this.
       document.getElementByTagName('head')[0].appendChild(s);
    }
</script>

As per comment:

By default dynamically created scripts are async so it doesn't block the execution but you can set the async to false explicitly.

For other things you might like to know about defer too. Check this link.

edited Dec 28 '15 at 09:38

answered Dec 28 '15 at 08:03

Jai

74,255
12
74
103

when you append as first child of `head` tag(`.appendChild(s)`),does that `script` tag get created at runtime also gets executed which in-turn load local jQuery file? – overexchange Dec 28 '15 at 08:56
lets say the remote jQuery library is available, Does remote jQuery not get loaded asynchronously with page getting loaded? – overexchange Dec 28 '15 at 09:45
@overexchange no! Because scripts with sources load synchronously. You can see that in the network tab of your browser inspector. Although other scripts which relies on jq lib can be deferred. – Jai Dec 28 '15 at 09:51

score 1 · Accepted Answer · edited Dec 28 '15 at 09:19

CDN's are great but they may go down once in a while for minutes or hours and will disrupt your website from loading properly or may not load at all. So it is better to have a quick and efficient fallback solution as your failsafe.

<script type="text/javascript">  
if (typeof jQuery === 'undefined') {  
   var e = document.createElement('script');  
   e.src = '/local/jquery-2.0.min.js';  
   e.type='text/javascript';  
   document.getElementsByTagName("head")[0].appendChild(e);  
}  
</script>

It should be well noted however that the above approach does not "defer" execution of other script loading (such as jQuery plugins) or script-execution (such as inline JavaScript) until after jQuery has fully loaded. Because the fallbacks rely on appending script tags, further script tags after it in the markup would load/execute immediately and not wait for the local jQuery to load, which could cause dependency errors.

A solution for that is to use document.write() and by doing so you will block other JavaScript included lower in the page from loading and executing. as in :

<script type="text/javascript">  
  if (typeof jQuery === 'undefined')   
     document.write('<script type="text/javascript" src="/local/jquery-2.0.min.js"><\/script>');  
</script>

In your code :

‘||’ is essentially acting as an OR statement. If ‘window.jQuery’ returns FALSE (in other words, if the jQuery was not successfully loaded), then it executes the next statement – adding a script tag to the page that references your local copy of the library.

EDIT: Explanation to the code used in the question.

score 0 · Answer 3 · answered Dec 28 '15 at 07:58

It's a way to ensure the script is loaded.

Sometimes a CDN may fail, it happened to me that some libraries weren't loaded because of the CDN unavaibility.

The problem of doing that is that your bandwidth will be used for theses libraries. If you don't use the minified libraries, you will waste even more bandwidth.

Fallback procedure to load local jQuery library

3 Answers3

Linked