Question

我有一个页面上有多个“赞”按钮，每个按钮指向不同的URL。

不幸的是，每个“Like”按钮都要求一个JS和CSS脚本，并且页面上有许多“Like”按钮，每个按钮都会反复加载相同的脚本。

为了澄清，我使用xfbml并异步加载JS-SDK，而“connect.facebook.net/en_US/all.js”文件只被拉下一次。

我遇到的问题包括：

我认为这是因为每个插入的<iframe>元素都需要这些资源。

如果你看http://techcrunch.com/，你会注意到他们通过懒惰插入Facebook / Twitter等元素来规避这一点。但是，如果你将鼠标悬停在其中几个上面，你会注意到JS和CSS的相同位仍然多次被无法加载。

有没有人有一个解决方案可以将每个文件限制为每页一个请求，无论其上的Like按钮数量是多少？

Answer 1

我认为，如果您使用HTML5代码，则不再是这种情况。您有一个基本代码，您只在页面上使用一次：

<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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

和类似按钮，评论等的一些代码，就像这个，你可以在页面上使用n次：

<div class="fb-like" data-href="YOUR_URL" data-send="true" data-width="450"></div>

这应该只加载一次资源。

无论如何，当我在页面上有多个Like按钮时，是否会阻止多次加载相同的JS / CSS文件？

1 个答案: