How to show something, once specific script is loaded?

I have a small tool that has social media share buttons on it. The API's for the buttons takes many seconds to load, the tab has a spinning icon and the buttons are visible but not usable. Which is obviously bad.

I am now using the small script below to load the API's after the page has loaded, which i want to keep.

<script>
// Load the share API's once the entire page is loaded.
    $(window).bind("load", function() {
       $.getScript('js/share.js', function() {});
    });
</script>

But I also want to hide the social media button div, until the APIs in the script have been loaded, how can i achieve this?

Make your div display none and then show it after script is loaded using the anonymous callback you already have setup.

HTML:

<div id="socialmedia" class="hide"></div>

CSS:

.hide {
    display: none;
}

JS:

$(window).bind("load", function () {
    $.getScript('js/share.js',
        function () {
            $('#socialmedia').removeClass('hide');
        }
    );
});