谷歌加一键速度。鼠标悬停时加载

Question

我想了解您对我遇到的问题和解决方案的意见 谷歌加一按钮（以及任何其他社交小部件）。

我们有一个高流量网站，运行快速且平稳（加载时间不到 1 秒）。 当尝试实现 google plus 按钮时，我们发现加载时间变得荒谬。

谷歌到处都在谈论加载时间，但他们仍然制作一个缓慢的小部件？

我们需要社交小部件，但加载速度对于我们的用户和 SEO 至关重要。

我想在网站加载后加载谷歌按钮，这样用户就不会注意到任何速度差异，但仍然有能力对我们说废话。

我想听听这种方法的缺点，或者更好的解决方案。

使用主体上的鼠标悬停事件来加载社交小部件。 它有效，但我不确定这是否可以接受。

http://www.webpagetest.org 显示与按钮实现之前相同的速度。

使用 jquery ：

    <div id="testcase"></div>

        <script type="text/javascript">

        $(document).ready(function() {
            $('body').mouseover(function() {

                $('body').unbind();
// google html
                $('#testcase').html('<g:plusone size="medium" annotation="inline"></g:plusone>');
    // Google code 
                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
            });
        });
        </script>

请让我知道您的想法或者我是否可以改进这个想法。

Answer 1

遇到过同样的问题，并做了类似的事情：

function loadPlusOne() {
  $.getScript("https://apis.google.com/js/plusone.js", function () {
    gapi.plusone.render ("plusdiv", {"size": "medium", "count": "true", "expandTo": "top", "href": "http://mysite.com"});
  });
}

函数在窗口加载后运行几毫秒。

Answer 2

除了 onLoad 之外，还有一个简单的替代方法 - 您可以在容器的悬停事件上执行此操作。好处是加载不会显得很慢，并且您可以使用自己设计的按钮来适应页面的设计。对于那些不关心它们的人来说，它也不会加载。它甚至可以为您提供额外的分析信息。不利的一面是，从悬停到加载，您仍然有相同的加载时间。人们可能会担心悬停后加载所需的时间足以阻止他们点击。

Techcrunch 在他们的主页上做了类似的事情，尽管他们是在整个新闻项目的容器上做的。请注意，他们的网站无论如何都非常慢。