グッズ ページに表示されるウェブサイトのピンタレストの「ピン留め」ボタンのデザインでは、ウェブ デザイナーが特別にマークされたアンカー タグをウェブ ページに挿入する必要があります。次に、ページは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 に置き換えます。これらの iframeの 属性は、pinterest.com ではなく、pinterest が使用する CDN のサーバー
srcを指す別のサーバーを指す正規化された URL を取得します。
これは静的な Web ページでは問題ありませんが、次のようになります。
- 「ピン留め」ボタンが jquery ロジックを介して動的に生成され、ユーザー アクションに応答してページ マークアップに挿入される動的ページでは機能しません。
- 「ピン留め」ボタンごとに 1 つの iframe が必要です。つまり、「ピン留め」ボタンごとに 1 つの HTTP GET が必要です。10 枚の写真があり、それぞれに pinit ボタンがある場合、ピンタレストの CDN への 10 の HTTP GET があります。これらの GET はすべて、同様の名前のリソースに対するものですが、ピン留めする画像の URL に基づいてすべてわずかに異なるため、キャッシュすることはできません。
私がやりたいのは、過度のGETを排除することです。何か案は？
私が持っていた1つのアイデアは次のとおりです。
- としてスタイル設定された div 内に、アンカー タグを 1 つだけ挿入し
display:none;ます。 - pinit.js を呼び出すと、そのアンカー タグが魔法のように置き換えられ、新しい iframe が読み込まれます。非表示の div にまだ存在するため、非表示です。
- いくつかの追加の JS ロジックを実行して、生成された iframe の src 属性の URL を検査し、ピンタレスト CDN のホスト名を保存します。
- ?
次に、ピンタレスト CDN の「正規化された」URL を生成できますが、ロジックが生成する iframe の src として単純に使用すると、過剰な GET で同じ問題が発生します。私が行ったのは、pinit.js (とにかくキャッシュ可能) への連続した呼び出しを排除したことだけです。
誰かがこれに直面しましたか？
私はこのデザインが変更されると信じています.
編集
pinterest は、ページ上の「ピン留め」ボタンに「非同期」メカニズムを提供し、「ピン留め」ボタンがたくさんある場合に使用するのに適していることを他の場所で読みました。それが何であるかわかりません。私はそれを見つけることができませんでした。
