如何在使用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