Pinterest悬浮保存按钮失效：能否同时加载pinit.js与pinit_main.js？

核心问题：双脚本加载引发的初始化冲突 #

你遇到的悬浮按钮仅偶尔出现的问题，直接原因是同时加载pinit.js和pinit_main.js导致的初始化逻辑冲突。这两个脚本存在依赖与职责重叠，重复加载会造成脚本执行顺序混乱、DOM元素绑定冲突，最终只有小概率能正常完成按钮初始化。

二者区别 #

• pinit.js：是Pinterest早期的加载器脚本，本身不负责按钮渲染，核心作用是动态检测页面环境后，自动加载核心功能脚本（即pinit_main.js），同时做兼容性适配。
• pinit_main.js：是实际负责渲染悬浮保存按钮、处理悬停交互、绑定Pin功能的核心脚本，所有和按钮相关的业务逻辑都在这里实现。

简单来说：pinit.js是“调度员”，负责找核心脚本干活；pinit_main.js是“执行者”，负责实际生成按钮。现在你同时引入了调度员和执行者，调度员还会再拉一个执行者过来，两个执行者抢着处理同一批元素，自然会出问题。

修复步骤 #

1. 移除重复脚本：只保留其中一个即可，推荐直接保留pinit_main.js的引用，因为它是核心功能脚本，无需中间加载器：

   <script type="text/javascript" async src="https://assets.pinterest.com/js/pinit_main.js?0.598328212150744"></script>
   

   或者使用官方最新标准嵌入方式（新版pinit.js已优化加载逻辑，不会重复加载核心脚本）：

   <script async defer src="https://assets.pinterest.com/js/pinit.js"></script>
   

2. 处理动态渲染内容：如果页面存在懒加载图片、异步生成的内容，需要在内容加载完成后手动触发初始化：

   // 图片/内容加载完成后调用
   if (typeof Pinterest !== 'undefined') {
       Pinterest.PinIt.init();
   }
   

3. 检查图片兼容性：确保页面中的图片有完整的src属性，未被CSS隐藏，且尺寸符合Pinterest识别要求（最小宽高200px）。

内容的提问来源于stack exchange，提问作者kdub1312