Comparing two approaches for fallback mechanism to load local jQuery library

Question

In approach1, below is the code for fallback mechanism to load local jQuery library

<head>
        <meta charset="UTF-8">
        <title>Fallback procedure</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
        </script>
        <script type="text/javascript">
            if (typeof jQuery === 'undefined') {  
                var element  = document.createElement('script');  
                element.src = '../js/jquery-1.11.3.js';  
                element.type='text/javascript';  
                document.getElementsByTagName("head")[0].appendChild(element); 
            }
        </script>
    </head>
    <body>
        <p>Hello World!!</p>
        <script type="text/javascript">
            jQuery('p').html("Good Bye!!");
        </script>
    </body>

In approach2, below is the code for fallback mechanism to load load jQuery library

<head>
        <meta charset="UTF-8">
        <title>Fallback procedure</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
        </script>
        <script type="text/javascript">
            if (typeof jQuery === 'undefined')   
               document.write('<script type="text/javascript" src="../js/jquery-1.11.3.js"><\/script>');  
        </script>
    </head>
    <body>
        <p>Hello World!!</p>
        <script type="text/javascript">
            jQuery('p').html("Good Bye!!");
        </script>
    </body>

Before executing its arguments, document.write overwrites all the page elements occured before document.write .

In this answer it is told that second approach is better.

why second approach is better?

approach 1 is preferred. [Why is document.write considered a “bad practice”?](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice). Also check following post: [Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail](http://stackoverflow.com/questions/1014203/best-way-to-use-googles-hosted-jquery-but-fall-back-to-my-hosted-library-on-go) — Rajesh, Dec 28 '15 at 09:14

score 0 · Answer 1 · answered Dec 28 '15 at 09:24

0

In that answer, the issue mentioned is that using the first approach, you continue running your js code when jQuery might have not yet finished loading.

in the second approach you assure that the injected script is loaded before continuing on to the next scripts

answered Dec 28 '15 at 09:24

MoLow

3,056
2
21
41

As this [answer](http://stackoverflow.com/a/13741662/3317808) says: *Later, though, once the page is fully loaded ... DW wipes out the page*. In our case, next scripts in below page are yet to be loaded and executed, so where is the point in: *blocking other JavaScript included lower in the page from loading and executing.* as mentioned in that [answer](http://stackoverflow.com/a/34489907/3317808) – overexchange Dec 28 '15 at 09:30

score 0 · Answer 2 · answered Dec 28 '15 at 09:30

Approach 2 is not good as it makes the html format of page dirty. Approach 1 should be altered a little as let the HEAD element be complete and then (at start of 'BODY') append some element to it like.

<head>
    <meta charset="UTF-8">
    <title>Fallback procedure</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
    </script>
</head>
<body>
    <p>Hello World!!</p>
    <script type="text/javascript">
        if (typeof jQuery === 'undefined') {  
            var element  = document.createElement('script');  
            element.src = '../js/jquery-1.11.3.js';  
            element.type='text/javascript';  
            document.getElementsByTagName("head")[0].appendChild(element); 
        }
        jQuery('p').html("Good Bye!!");
    </script>
</body>

Comparing two approaches for fallback mechanism to load local jQuery library

2 Answers2