Display multiple social buttons only after they are all loaded from each source?
What type of jQuery function could I use to wait to display multiple social buttons (i.e. Face开发者_运维百科book 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?
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.
Use a service such as AddThis to do this for you.
精彩评论