0

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

Improve this question
2
  • 2
    Note: That localfolder not on customer's laptop, its on web-server on which the site is hosted Commented Dec 28, 2015 at 7:58
  • @Satpal you are right!!! My bad. All the <img src=".."> and <script src=".."></script> refer to webserver folder. Thank you for correction Commented Dec 28, 2015 at 8:03

3 Answers 3

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

3 Comments

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?
lets say the remote jQuery library is available, Does remote jQuery not get loaded asynchronously with page getting loaded?
@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.
0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.