Doing an asynchronous HTTP request - what's the difference between these two?

Question

This is the (default/official) JavaScript code for loading Disqus comments on a web page:

(CODE #1)

<script type="text/javascript">
    var disqus_shortname = 'paulund';

    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>

As I see it, the code does the HTTP request asynchronously; but that's not the point.

The thing is, I needed to make some changes to the code so that the comments are loaded only when the user scrolls down to the comments section, as in, lazy loading. And I've got two working methods to do it.

(CODE #2)

jQuery(document).ready(function($){
    $('#comments').waypoint(function () {

        var disqus_shortname = 'paulund';

        $(function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();

    }, { offset: '100%', triggerOnce: true });
});

(CODE #3)

jQuery(document).ready(function($){
    $('#comments').waypoint(function () {

        var disqus_shortname = 'paulund';

        $.ajax({
            type: "GET",
            url: "http://" + disqus_shortname + ".disqus.com/embed.js",
            dataType: "script",
            cache: true
        });

    }, { offset: '100%', triggerOnce: true });
});

Questions:

1. Apart from the obvious fact that I am now doing it with jQuery, is there any difference between what the codes #1 and #2, and #1 and #3, do? Could I possibly be doing something wrong, which I am completely missing?

2. Why don't the codes #2 and #3 work when started with $.noConflict();? (After all I found it in the docs as well.)

For instance, this doesn't do anything. (But gives an error in the browser console, "Uncaught TypeError: Cannot call method 'noConflict' of undefined.".)

$.noConflict();
jQuery(document).ready(function($){
    $('#comments').waypoint(function () {

        var disqus_shortname = 'paulund';

        $.ajax({
            type: "GET",
            url: "http://" + disqus_shortname + ".disqus.com/embed.js",
            dataType: "script",
            cache: true
        });

    }, { offset: '100%', triggerOnce: true });
});

Answer 1

Nope, no difference. I would use method 3. $.noConflict should not have any effect if used the way you have it.

Uncaught TypeError: Cannot call method 'noConflict' of undefined. would mean that you've already used $.noConflict somewhere else.

Answer 2

There is no difference between the two, both are loading the script asynchronously. You can see for yourself by viewing the rendered script tag in the DOM explorer in your console. If you need it to load synchronously you could utilize the first method and set dsq.async = false;. If you are relying on it being loaded before performing some operation, consider adding your dependent operation into a onload callback of the script, that way it will be a non-blocking operation and keep your page loading fast:

var disqus_shortname = 'paulund';

(function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.onload = function(){ 
       // dependent code goes here
    }
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();