Question

What type of jQuery function could I use to wait to display multiple social buttons (i.e. Facebook Like/Send, Twitter Follow/Tweet, Google+) only after they have all been loaded from their respective source. The problem I am enounctering is after a page is loaded I have these social buttons on, I have to wait one-by-one as these buttons download and it doesn’t look attractive to the user. Any ideas for what I can do about this?

Answer 1

Put them all in a single container <div> with its style set to visibility:hidden;.

Then after window.load() fires, which waits for all images on the page to load, use jQuery to make it display again…

$(window).load(function(){
    $('#myContainerDiv').css('visibility', 'visible');
});

As opposed to display:none;, using visibility:hidden; will ensure that the hidden object still takes up the same amount of space in the content flow. Changing it to visibility:visible; simply toggles it without altering the position of the surrounding content.