Only load content when user clicks on item.

I have a situation on a blog where I have share buttons. You click on the share button and a box drops down, showing some places you can share the post. It looks cool and all, but because there is a lot of data being fetched from the various servers (facebook, twitter, etc) it takes longer than I wish to load the page while it stumbles on getting these buttons loaded.

How (using jQuery preferably) can I make it so the buttons for facebook, etc, will load when the user clicks the share button, rather than when the page loads, so I can cut down page load time?

I have always wondered how you do this but I've never really needed to do it.

Edit: For reference, the share button does this when you click on it. It's not very complicated.

$('.share').click(function(e) {

            $('.popup-share').fadeOut('100');

    if($(this).parents('.share-is-care开发者_运维技巧').children('.popup-share').is(':visible')) {
        $(this).parents('.share-is-care').children('.popup-share').fadeOut('100');
    }
    else {
        $(this).parents('.share-is-care').children('.popup-share').fadeIn('100');
    }

}

---

If you are loading dynamic content you can add that content to your page dynamically using AJAX functions, here is an example of putting some code into a container:

$('.share').click(function(e) {
    if($(this).parents('.share-is-care').children('.popup-share').is(':visible')) {
        $(this).parents('.share-is-care').children('.popup-share').fadeOut('100');
    } else {
        $.get('http://url_to_get.whatever', function (data) {
            $(this).parents('.share-is-care').children('.popup-share').html(data).fadeIn('100');
        });
    }
}

If you just want to add some static code to an element on-click (like an iframe that loads an external page or something) you can do something like this:

$('.share').click(function(e) {
    if($(this).parents('.share-is-care').children('.popup-share').is(':visible')) {
        $(this).parents('.share-is-care').children('.popup-share').fadeOut('100');
    } else {
        $(this).parents('.share-is-care').children('.popup-share').html('<iframe src="http://www.foo.bar/script.bam"></iframe>').fadeIn('100');
    }
}

---

If you want to have the functionality you describe, then you probably need to learn a bit of AJAX.

In essence you're currently embedding a script of some other party that offers the like system (Facebook, Twitter, Google, …). This loads on page load and populates some elements with various like buttons. Now, you need to delay the execution of the embedded script until some event occurs (user click share button).

There's a verbose blog post with sample code for Facebooks like button but the process is essentially the same for all sites. See http://www.torbenleuschner.de/blog/119/ladezeit-facebook-like-button-per-jquery-nachladen/ (German language)

The key point is to have an empty element to hold the buttons which is only filled after an event (click in your case). For example:

<div class="popup-share"></div>

Then you need to wait for the event in the same way you're currently using. But instead of having the button creation scripts on loaded page, we'll assume they are contained in buttons-fragment.html.

// Delay function's execution until click and call it exactly once
$('.share').one('click', function loadLikeButtons(e) {
    // Get the empty element
    var likeButtonContainer = $('.popup-share');
    // Fetch the code which contains the buttons (this is AJAX in the background)
    $.get('your-server.com/buttons-fragment.html', {}, function fillInLikeButtons(data){
        // The code in this inner function runs as soon as the code for the buttons is available / was successfully loaded.
        // The argument data contains the same HTML fragment that you are currently using to create the buttons
        // Place the buttons (or button initialization scripts within the still empty button holder
        likeButtonContainer.html(data);
    });
});

Note for a solution with better performance omit the AJAX request to fetch the HTML fragment. Instead transfer it with the page load but keep it in a JavaScript variable. Inject it to the empty button holding element on click of your share button. I didn't put this solution because I think having only one solution in the answer to your question is easier to understand. You might want to open another question on how to transfer a HTML fragment with a page load and inject it on some event.

Also note, that I did never actually test the code typed above. You could perhaps hit typos.

As a side note (not part of the answer): Mind privacy related issues when putting like buttons to your site as well as performance related stuff. Let's assume the buttons is created similar to the following code:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="box_count" show_faces="false" width="55" font="arial"></fb:like>

As soon as the browser encounters the fragment, it will load the script from Facebook. While doing so the address of your page is transferred as well as possibly set cookies from Facebook. So if somebody is still logged into Facebook, Facebook will be able to track him/her visiting your site as soon as your site is loaded. With the answer presented above this only happens on click of the share button (because this causes loading of the external scripts).