pinterest - 在需要时加载 pinterest 脚本

Question

我有一个索引页面，其中 Pinterest 按钮对于不同的项目将多次可见。我想确保页面加载速度很快，并且 Pinterest 按钮不会减慢页面速度。

然而，由于 pinterest JS 解析 DOM 并替换 pinit 按钮中的代码，如果按钮数量很多，这对我来说会变得很昂贵。

我能以某种方式改进这个过程吗？如何仅在需要时调用 pinterest 脚本？

Answer 1

以下是我们为希望异步加载 Pinterest 脚本的网站运营商推荐的内容：

<script type="text/javascript">
(function(d){
  var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
  p.type = 'text/javascript';
  p.async = true;
  p.src = '//assets.pinterest.com/js/pinit.js';
  f.parentNode.insertBefore(p, f);
}(document));
</script>

这不应阻止页面的加载。

Answer 2

我尝试了各种选择和方法：

1. 使用 $.getScript 方法动态加载文件。
2. 使用 $.live 方法进行实时事件绑定。
3. 不加载 PINTEREST 脚本并使用 javascript 在单击时处理弹出窗口。

第三种方法最适合我。它让我可以控制弹出窗口的位置，并且不会调用任何不必要的 Pinterest 脚本调用。