如何阻止Instagram embed.js加载时自动执行instgrm.Embeds.process()？

我之前在实现自定义懒加载Instagram嵌入内容时，也碰到过完全一样的问题——自行加载embed.js后，它自动执行instgrm.Embeds.process()导致重复渲染，打乱了手动触发的逻辑。下面是几个亲测有效的解决方案：

方案1：提前拦截并接管process方法 #

这是最直接的方法，在加载embed.js之前，先创建全局的instgrm对象，用空函数临时替换Embeds.process，等脚本加载完成后保存原始方法，后续按需手动调用：

// 1. 提前初始化全局instgrm对象，拦截自动执行
window.instgrm = window.instgrm || {};
instgrm.Embeds = instgrm.Embeds || {
  process: () => {} // 空函数占位，阻止脚本加载时自动执行
};

// 2. 动态加载Instagram embed.js
const embedScript = document.createElement('script');
embedScript.src = 'https://www.instagram.com/embed.js';
embedScript.async = true;

embedScript.onload = function() {
  // 3. 脚本加载完成后，保存原始的process方法
  window.instgrm._originalProcess = window.instgrm.Embeds.process;
  // 继续用空函数占位，防止后续意外自动触发
  window.instgrm.Embeds.process = () => {};
};

document.head.appendChild(embedScript);

当你需要手动渲染特定Instagram嵌入元素时，调用原始方法即可：

// 渲染单个目标元素
const targetElement = document.querySelector('.instagram-embed');
window.instgrm._originalProcess(targetElement);

// 如果要渲染所有未处理的嵌入元素，直接调用不带参数的原始方法
// window.instgrm._originalProcess();

方案2：修改embed.js的自动执行逻辑（需自行托管） #

如果你能接受自行托管修改后的脚本，可以下载官方的embed.js，找到最后自动执行的代码段（通常是检查document状态后调用process()的部分），将其删除或注释掉。

比如，官方脚本最后通常会有类似这样的代码：

if (document.readyState === 'complete' || document.readyState === 'interactive') {
  instgrm.Embeds.process();
} else {
  document.addEventListener('DOMContentLoaded', function() {
    instgrm.Embeds.process();
  });
}

把这段代码删除，然后托管修改后的脚本，之后加载这个自定义版本的脚本即可，这样它就不会自动执行process，完全由你手动触发。

⚠️ 注意：这种方法需要你定期检查官方脚本的更新，避免因版本差异导致功能失效，同时要确保符合Instagram的服务条款。

方案3：延迟加载脚本直到需要时 #

如果你的懒加载逻辑是只有当元素进入视口才加载内容，那可以把embed.js的加载时机也推迟到第一次需要渲染嵌入内容时：

// 假设这是你的懒加载触发函数（比如IntersectionObserver回调）
function handleInstagramLazyLoad(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const target = entry.target;
      // 检查脚本是否已加载
      if (!window.instgrm) {
        // 首次加载embed.js
        const embedScript = document.createElement('script');
        embedScript.src = 'https://www.instagram.com/embed.js';
        embedScript.onload = function() {
          // 脚本加载完成后直接渲染当前元素
          instgrm.Embeds.process(target);
        };
        document.head.appendChild(embedScript);
      } else {
        // 脚本已加载，直接渲染
        instgrm.Embeds.process(target);
      }
      // 停止监听当前元素
      observer.unobserve(target);
    }
  });
}

// 初始化IntersectionObserver
const observer = new IntersectionObserver(handleInstagramLazyLoad);
document.querySelectorAll('.instagram-embed').forEach(el => observer.observe(el));

这种方法从根源上避免了自动执行的问题——脚本只有在第一次需要渲染时才加载，此时自动执行的process()只会处理当前已存在的嵌入元素（也就是触发懒加载的那个），后续的元素依然由你手动触发。

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