Question

I am loading a script from the google plus button only when the user requests it. The code that is used is the following:

    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

When I fire this script it will change the placeholder into the google plus button. The placeholder looks like this:

<g:plusone size="tall" annotation="none"></g:plusone>

There are a few other buttons I load like this, only when needed.

Now sometimes the buttons take a while to load. Is there a way get an alert when all the buttons are loaded.

I can then just display a loader until it is fully loaded, and then display it nicely.

I use jQuery as my javascript framework.

Edit

For a better solution check out this question: Invoking handler when all scripts finished loading via $.getScript

A better way to go is using jQueries deffered object. I added a small example and fiddle to the answer.

Answer 1

jQuery provides a mechanism to define a script load handler:

$.getScript( 'https://apis.google.com/js/plusone.js', function () {
    // the script has loaded and executed
});

This handler is invoked after the script has executed, so it should suit your needs…