Question

我想减少页面加载时间。社交图标（Facebook赞，Twitter跟随等）占用了很多速度。

我想显示类似按钮的静态图像，并在鼠标悬停时显示实际按钮。

我可以通过在悬停的show()隐藏div中加载真实按钮来轻松完成此操作，但这意味着无论如何都会加载内容。

有没有办法仅加载悬停按钮？

修改

例如，当用户将鼠标悬停在图片上时，会加载Facebook like button：

<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>

显示按钮：

<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>

Answer 1

将图像放在按钮所在的位置，添加悬停事件，并在该悬停事件中：隐藏图像，并运行为社交媒体按钮提供的任何代码。按钮html-element本身不会加载任何代码

使用此示例更新，将其放在文件中并在您的服务器上进行测试（注意！jsfiddle没有显示类似按钮，它在控制台中提供安全错误，因此在您自己的服务器上运行）

<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>

这是一个推特按钮的实例：

<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>

jQuery：仅在悬停时加载内容

1 个答案: