Есть ли способ предотвратить загрузку одного и того же файла 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>

Это должно загрузить ресурсы только один раз.