jquery - 社交按钮的延迟加载

Question

有人知道http://googleblog.blogspot.com/上的社交按钮是如何加载的吗？我尝试通过 JQuery 异步加载它们，但与 Google 博客相比，实际按钮至少生成 2 个额外的 HTTP 请求，例如：

http://connect.facebook.net/en_US/all.js https://apis.google.com/js/plusone.js

Answer 1

使用 Chrome 开发工具，您可以看到 Google 博客正在发出单独的请求以加载每个社交 API。它没有出现在控制台中，这让我觉得它正在执行类似 document.write 的操作。

要查看它加载资源，请打开开发工具 (ctrl+shift+i) 并单击 Network 选项卡。向下滚动到底部，然后将鼠标悬停在社交按钮上，以便它们加载。您将看到从 Twitter、Facebook 和 Google+ 加载的网络资源。

您的异步方法应该没问题。我不认为谷歌在这里发挥了任何作用。

更新

Google 正在使用不需要加载 Facebook all.js 脚本的“喜欢”按钮的 iframe 版本。这是来自Facebook 文档的代码示例。

<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL"
        scrolling="no" frameborder="0"
        style="border:none; width:450px; height:80px"></iframe>

+1 按钮似乎使用了一种未记录的技术。它使用这样的 URL 加载 +1 按钮（类似于 Facebook 的 Like 按钮）：

https://plusone.google.com/_/+1/fastbutton?url=YOUR_URL_ENCODED&size=medium&count=true&width=300&annotation=bubble