如何在使用pinterest“pin it”按钮时消除过多的HTTP请求？

Question

相关：How can i rerender Pinterest's Pin It button?

---

的Pinterest的设计“别针把它”对their goodies page显示网站，按钮，呼唤一个网页设计师的特殊标记的锚标记插入到自己的网站页。然后该页面必须调用​​。

特殊的锚标签必须是这样的：

<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代码确实是这样的：

• 扫描锚标签页
• 查找的特殊标记，明确了“引脚它按钮“类和href前缀
• 替换具有重新格式化的IFRAME的定位标记。这些iframe的src属性获得标准化的URL，这些URL指向不同的服务器，而不是pinterest.com，而是来自CDN的pinterest使用的服务器。

这是罚款的静态网页，但：

• 它不动态页面，“用别针把它”按钮可能被动态地通过jQuery逻辑产生和注入的网页标记上工作对用户操作的响应。
• 它需要每个“pin it”按钮一个iframe，这意味着每个“pin it”按钮一个HTTP GET。如果您有10张照片，每张照片都带有一个pinit按钮，那么有10个HTTP GET可以帮助您获得CDN。所有这些GET都是用于名称相近的资源，但它们都稍有不同，基于要固定的图像的URL，因此无法缓存。

我想要做的是消除过多的GET。有任何想法吗？

---

我有一个想法是：

• 插入只有一个锚标记，样式为display:none;一个div内。
• 调用pinit.js，这会导致该锚标记的魔术替换以及加载新的iframe。它是无形的，因为它仍然存在于无形的div中。
• 运行一些额外的JS逻辑来检查生成的iframe的src属性的URL，保存pinterest CDN的主机名。
• ？

然后我可以生成pinterest CDN的“标准化”URL，但是......如果我简单地将它们用作iframe的src 我的逻辑生成，那么我有与过量GET相同的问题。我所做的全部都是连续调用pinit.js（无论如何都可以缓存）。

有没有人遇到过这个？

我不得不相信这个设计将会改变 - 它似乎不适合现在它的工作方式。

---

EDIT

我读elsewhere该Pinterest的提供了用于“PIN为”在页面上的按钮，适用于当有大量的“PIN它”按钮的“异步”的机制。不知道那是什么;我找不到它。

Answer 1

我在回答我自己的问题。

我看了一下，但找不到pinterest的任何详细的文档，描述了如何解决这个问题。我认为他们的API太新了，太不成熟，无法覆盖这一点。

我发现的问题是，对于每个“pin it”按钮，都有一个IFRAME，并且该iframe加载了来自pinterest CDN的源。 10张图像表示10个内联框架和10个HTTP GET。

我确实找到了在网页上插入单个按钮的方法，该网页允许用户固定10个图像中的任何一个。这是通过the pinmarklet.js script, provided by pinterest。但是，这个脚本并不适合我，它有一些bug，所以我修改它以适合我的目的。

现在当我点击一个“别针”按钮时，它只填充一个IFRAME，无论页面上有多少照片可用，只需一个HTTP GET。该UI看起来是这样的：

......虽然你可以把你喜欢的东西，我猜。

我修复了哪些问题？

该pinmarklet是

（a）kludgy。它定义了一个匿名脚本，并且一个页面需要在每次需要弹出pinterest 交互表单时重新请求JS。没有必要。让我们只做一次。 （b）破碎。有几个错误，包括试图确定图像的自然尺寸的代码中的竞争条件 。 由于这个bug，pinmarklet表单有时不会显示。 跛脚！

我修改了代码来修复这些问题，现在它对我来说效果很好。

http://pastebin.com/y5fBRJHc