jQuery: confirm if .html() is addable

Question

To save up on performance, I load social links by adding them when user hovers over the follow/like buttons. Example:

jQuery(document).ready(function(){

    jQuery('.trigger').bind('click mouseover', function(){

        jQuery(this).html('<script src="http://platform.twitter.com/widgets.js"></script><a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false" data-size="medium"> Follow @twitter </a>');

        jQuery('.trigger').unbind('click mouseover');

    });

});

Works fine. In fact, you should do this as well.

The problem is that in Firefox when you use incognito mode, it blocks social links, so .html() doesn't output anything.

The same problem with some browser add-ons that blocks social links.

Is there anyway to find out if .html() did output the code, and if not , just add a link like:

jQuery(this).html('<a href="">Follow</a>');

Answer 1

You need to load the script yourself rather than this way and then check if it succeeded:

jQuery(document).ready(function($) {

    $('.trigger').one('click mouseover', function(){

        // we add just the HTML manually
        $(this).html('<a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false" data-size="medium"> Follow @twitter </a>');
        // and the script with jQuery
        $.getScript("http://platform.twitter.com/widgets.js").fail(function(err) { 
            // react to errors here, for example set the .html
        }).done(function(success) { 
            // here we can be sure the script loaded.
        });
    });

});

Note that a particularly clever ad blocker could intercept the request and return an empty response instead of a 404 - but in practice none do.

I also generally disagree with your assertion that they should be lazy loaded - in general it's mostly fine to just add the word async to the script and it won't block the page loading and load later:

<!--- NOTE THE 'async' ---> 
<script async src="http://platform.twitter.com/widgets.js"></script>
<a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false" data-size="medium"> Follow @twitter </a>

async - Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously. It has no effect on inline scripts (ie, scripts that don't have the src attribute).

From MDN .

---

As general code review, ready takes a parameter which you can use to short name jQuery (as $ commonly), you should use the standard .on in favor of the deprecated deprecated .bind (and .off for unbind).

---

Update, I already realized that what you were doing with the bind/unbind ( on/off ) pair is essentially a one which fires an event only once on the first time - so I changed it to that.