当我在页面上有多个 Like 按钮时，是不是可以防止多次加载同一个 JS/CSS 文件？

Posted 2023-02-19

【中文标题】当我在页面上有多个 Like 按钮时，是不是可以防止多次加载同一个 JS/CSS 文件？

【英文标题】：Is there anyway to prevent the same JS/CSS file from being loaded multiple times when I have multiple Like buttons on a page?当我在页面上有多个 Like 按钮时，是否可以防止多次加载同一个 JS/CSS 文件？

【发布时间】：2011-12-25 16:19:05

【问题描述】：

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

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

为了澄清，我正在使用 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 位仍然会被多次加载而不必要地加载。

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

【问题讨论】：

第一个问题写得很好。欢迎使用 Stack Overflow！

【参考方案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>

还有一些类似按钮、cmets 等的代码，比如这个，你可以在页面上使用 n 次：

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

这应该只加载资源一次。