Как устранить излишние HTTP-запросы при использовании кнопок «приколи»? - PullRequest
Новая
       18

Как устранить излишние HTTP-запросы при использовании кнопок «приколи»?

4 голосов
/ 21 марта 2012

Похожие: Как я могу изменить название кнопки Pin It Pinterest?

Дизайн пиктограммы кнопка "закрепить" для веб-сайтов , показанный на странице их вкусностей , призывает веб-дизайнера вставить специально отмеченный тег привязки в их веб-страницу.Затем страница должна вызвать шаблон pinit.js .

Специальная метка привязки должна быть такой: 

<a href="http://pinterest.com/pin/create/button/?
    url=http%3A%2F%2Fpage%2Furl
    &media=http%3A%2F%2Fimage%2Furl" 
   class="pin-it-button" count-layout="horizontal"></a>

и шаблон pinit.js должен выглядеть следующим образом и должен располагаться после последнего пина.

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js">
</script>

Насколько я могу судить, код pinit.js делает следующее:

  • сканирует страницу на предмет привязки тегов
  • ищетспециальная маркировка, в частности класс pin-it-button и префикс href
  • , заменяют теги привязки переформатированными IFRAME.Атрибуты src для этих iframes получают нормализованные URL-адреса, которые указывают на другой сервер, а не на pinterest.com, а скорее на сервер из CDN, который использует pinterest.

Thisподходит для статической веб-страницы, но:

  • не работает на динамической странице, где кнопки «закрепить» могут динамически генерироваться с помощью логики jquery и вставляться в разметку страницы в ответ на действия пользователя,
  • требуется один iframe на кнопку «закрепить», что означает один HTTP GET на кнопку «закрепить».Если у вас есть 10 фотографий, каждая с кнопкой пинита, то есть 10 HTTP GET для CDN участников.Все эти GET предназначены для ресурсов с одинаковыми именами, но все они немного отличаются, в зависимости от URL-адреса изображения, которое должно быть закреплено, и поэтому не могут быть кэшированы.

Что я хотел бысделать, это устранить чрезмерные GET.Есть идеи?

У меня была одна идея:

  • вставить ровно один тег привязки в div, стилизованный как display:none;.
  • вызывает файл pinit.js, который приводит к волшебной замене этого тега привязки и загрузке нового iframe.Он невидим, потому что он все еще находится в невидимом div.
  • запустите некоторую дополнительную логику JS, чтобы проверить URL-адрес атрибута src для сгенерированного iframe, сохранив имя хоста для CDN интереса.
  • ?

Затем я могу сгенерировать "нормализованные" URL-адреса для CDN, но ... если я просто использую их в качестве src для iframe , моя логика генерирует , тогда у меня естьта же проблема с чрезмерным GET.Все, что я сделал, это исключил последовательные вызовы pinit.js (который в любом случае кешируется).

Кто-нибудь сталкивался с этим?

Я должен верить, что этот дизайн изменится - он кажется не масштабируемым для интереса, как он работает сейчас.

РЕДАКТИРОВАТЬ

Я прочитал в другом месте , что pinterest обеспечивает «асинхронный» механизм для кнопок «закрепить» на странице, подходящийдля использования, когда есть много кнопок "закрепить это".Не уверен, что это такое;Я не мог найти это.

1 Ответ

3 голосов
/ 26 марта 2012

Я отвечаю на свой вопрос.

Я посмотрел, но не смог найти подробного документа от интереса, который описывает, как решить эту проблему.Я думаю, что их API просто слишком новый, слишком незрелый, чтобы покрыть это.

Проблема, которую я обнаружил, заключалась в том, что для каждой кнопки «закрепить» существовал отдельный IFRAME, и этот iframe загружал источник из CDN интереса.10 изображений означают 10 фреймов и 10 HTTP GET.

Я нашел способ вставить на веб-страницу одну кнопку, которая позволяет пользователю закрепить любое из 10 изображений.Это было сделано с помощью скрипта pinmarklet.js, предоставленного pinterest .Но этот сценарий не работал для меня, и в нем было несколько ошибок, поэтому я изменил его в соответствии со своими целями.

Теперь, когда я нажимаю кнопку «закрепить», она заполняет только один IFRAME, требуется только один HTTP GET, независимо от того, сколько фотографий доступно на странице.Интерфейс выглядит следующим образом:

enter image description here

... хотя, я думаю, вы можете сделать все, что захотите.

Какие проблемы я исправил?

Пинмарклет был

(а) хитрым.Он определил анонимный сценарий, и страница должна будет повторно запрашивать JS каждый раз, когда ей требуется всплывающая форма взаимодействия с процентами.Нет необходимости в этом.Давайте просто сделаем это один раз.

(б) сломан.Было несколько ошибок, включая состояние гонки в коде, который пытается определить естественный размер изображения.Из-за этой ошибки, форма pinmarklet иногда не показывается.Хромой!

Я изменил код, чтобы исправить эти вещи, и теперь он работает хорошо для меня.

http://pastebin.com/y5fBRJHc

...