Question

我希望您对我遇到的问题和解决方案有所了解谷歌加一个按钮（和任何其他社交小部件）。

我们有一个高流量站点，运行快速而顺畅（加载时间不到1秒）。在尝试实施google plus按钮时，我们看到我们的加载时间变得荒谬。

谷歌正在喋喋不休地讨论加载时间，他们仍然制作一个缓慢的小部件？

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

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

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

在body上使用mouseover事件加载社交窗口小部件。它有效，但我不确定这是否可以接受。

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在他们的主页上做了类似的事情，尽管他们是在整个新闻的容器上做的。请注意，无论如何，他们的网站非常慢。

Google Plus单键速度。鼠标悬停时加载

2 个答案: