javascript - 使用 pinterest "pin it"按钮时如何消除过多的 HTTP 请求？

pinterest 为网站 设计的“固定”按钮，显示在 their goodies page 上，要求网页设计师在他们的网页中插入一个特殊标记的 anchor 标签。然后页面必须调用 pinit.js boilerplate 。

特殊的 anchor 标签必须是这样的:

<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 代码的作用是这样的:

扫描页面以查找 anchor 标记

查找特殊标记，特别是“pin-it-button”类和 href 前缀

用重新格式化的 IFRAME 替换 anchor 标记。这些 iframe 的 src 属性获得指向不同服务器的规范化 URL，而不是 pinterest.com，而是来自 pinterest 使用的 CDN 的服务器。

这在静态网页上很好，但是:

它不适用于动态页面，其中“固定”按钮可能通过 jquery 逻辑动态生成并注入(inject)页面标记以响应用户操作。

每个“pin it”按钮需要一个 iframe，这意味着每个“pin it”按钮需要一个 HTTP GET。如果您有 10 张照片，每张照片都有一个 pinit 按钮，那么就有 10 个 HTTP GET 到 pinterests 的 CDN。所有这些 GET 都是针对名称相似的资源，但它们都略有不同，基于要固定的图像的 url，因此无法缓存。

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

我的一个想法是:

在样式为 display:none; 的 div 中恰好插入一个 anchor 标记。

调用 pinit.js，这会导致该 anchor 标记的神奇替换以及新 iframe 的加载。它是不可见的，因为它仍然驻留在不可见的 div 中。

运行一些额外的 JS 逻辑来检查生成的 iframe 的 src 属性上的 URL，保存 pinterest CDN 的主机名。

?

然后我可以为 pinterest CDN 生成“规范化”的 URL，但是...如果我只是将它们用作我的逻辑生成的 iframe 的 src，那么我会遇到与过多 GET 相同的问题。我所做的只是消除了对 pinit.js 的连续调用(无论如何都可以缓存)。

有没有人遇到过这种情况？

我不得不相信这种设计将会改变——它现在的工作方式对于 pinterest 来说似乎不可扩展。

编辑

我读过 elsewhere，pinterest 为页面上的“固定”按钮提供了一种“异步”机制，适用于有很多“固定”按钮的情况。不确定那是什么；我找不到。

最佳答案

我正在回答我自己的问题。

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

我发现的问题是，对于每个“固定”按钮，都有一个 IFRAME，并且该 iframe 从 pinterest CDN 加载源。 10 张图片意味着 10 个 iframe 和 10 个 HTTP GET。

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

现在，当我单击“固定”按钮时，它只填充一个 IFRAME，只需要一个 HTTP GET，而不管页面上有多少张照片。用户界面如下所示:

...虽然你可以做任何你喜欢的，我想。

我解决了哪些问题？

pinmarklet 是

(a) 笨手笨脚的。它定义了一个匿名脚本，一个页面需要
每次需要弹出 pinterest 时都重新请求 JS
互动形式。不需要那个。让我们只做一次。

(b) 坏了。有几个错误，包括竞争条件
在试图确定图像自然大小的代码中。
由于那个错误，pinmarklet 表单有时不会显示。
瘸!

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

http://pastebin.com/y5fBRJHc

关于javascript - 使用 pinterest "pin it"按钮时如何消除过多的 HTTP 请求？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9809694/