javascript - 当我在一个页面上有多个 Like 按钮时，有没有办法防止同一个 JS/CSS 文件被多次加载？

Question

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

不幸的是，每个“赞”按钮都需要一个 JS 和 CSS 脚本，并且页面上有许多“赞”按钮，为每个按钮一遍又一遍地加载相同的脚本。

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

我遇到问题的文件是:

• http://static.ak.fbcdn.net/rsrc.php/v1/yw/r/2RZcOthJlDD.js
• http://static.ak.fbcdn.net/rsrc.php/v1/yx/r/QAxExOsrrUv.css

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

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

有没有人有解决方案可以将这些文件中的每一个限制为每页一个请求，而不管上面的“赞”按钮有多少？

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>

这应该只加载一次资源。