jQuery: Load content only on hover

Question

I want to reduce page loading time. Social icons (Facebook Like, Twitter follow etc) takes up a lot of speed.

I want to display a static image of the like buttons, and on mouse hover, display the actual buttons.

I can do this easily by loading the real buttons in a hidden div that I show() on hover, but this means that the content will be loaded regardless.

Is there any way to only load the buttons on hover?

EDIT:

For example, when user hovers over image, it loads up Facebook like button:

Top of <body>:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Display button:

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>

Which part takes up the speed, the loading of the graphics or initialization code or its relation to the social media sites? — clearlight, Mar 29 '15 at 19:37
Sure there is, include the scripts from facebook etc. asyncronously when someone hovers. Unless you defer the entire loading of the scripts, there's no point. — adeneo, Mar 29 '15 at 19:37
@1sand0s Everything. Facebook like buttons, Twitter follow buttons and so on have loads of code that slows down the loading of the page. — Henrik Petterson, Mar 29 '15 at 19:39
@adeneo Can you please elaborate on this? Maybe with an example of how to do this? — Henrik Petterson, Mar 29 '15 at 19:39
[This StackOverflow question][1] has a bunch of examples on how to do this. [1]: http://stackoverflow.com/questions/5751620/ways-to-add-javascript-files-dynamically-in-a-page — Kevin Grabher, Mar 29 '15 at 19:41
@KevinGrabher link format in comments is [ text ]( URL ) like this [StackOverflow question](http://stackoverflow.com/questions/5751620/) URL must start with http prefix. — clearlight, Mar 29 '15 at 20:00

BobbyTables · Accepted Answer · 2015-03-31T07:08:40.183

Put an image where the button should be, add a hover event, and in that hover event: hide the image, and run whatever code is supplied for the social media-button. The button html-element itself doesnt load any code

Updated with this example, put it in a file and test on your server (Note! jsfiddle does not show the like button, it gives security errors in the console, so run it on your own server)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(function () {
    //hover event for button
    $("#fb-img").hover(function () {

        //remove picture
        $(this).remove()

        //run social code
        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=171501779696780&version=v2.3";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    })
});
</script>

<div id="fb-root"></div>
<img id="fb-img" src="https://www.seoclerk.com/pics/want9745-10lgy11385380512.jpg" style="width:200px;height:auto">
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>

And heres a working example of the twitter button:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(function () {
    //hover event for button
    $("#tw-img").hover(function () {

        //remove picture
        $(this).remove()

        //run social code
        !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
    })
});
</script>

<img id="tw-img" src="http://www.southernfriedscience.com/wp-content/uploads/2011/12/logo_twitter_withbird_1000_allblue.png" style="width:200px;height:auto">
<a href="https://twitter.com/share" class="twitter-share-button"></a>

Very interesting, although I cannot seem to make it work, please see the following jsfiddle: http://jsfiddle.net/oy4rpshv/1/ — Henrik Petterson, Mar 30 '15 at 15:04
js-fiddle does not show the like button, it gives security errors in the console. i swapped for an example that works on my own server — BobbyTables, Mar 31 '15 at 06:59

jQuery: Load content only on hover

1 Answers1