请求合并实现iframe进入viewport后加载的JavaScript代码

没问题，我帮你把懒加载的逻辑整合到一起，直接就能用！下面是完整的实现步骤和代码：

第一步：修改你的HTML结构 #

把原本的iframe标签里的src替换成data-src，这样初始不会加载内容，比如：

<iframe data-src="https://你的真实地址.com" width="600" height="400" frameborder="0"></iframe>

第二步：合并后的JavaScript代码 #

这段代码已经把“判断元素是否在视口”和“滚动监听触发加载”的逻辑整合好了，还加了防抖优化（避免滚动时频繁触发判断）：

// 判断元素是否进入视口的工具函数
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.bottom >= 0
  );
}

// 加载进入视口的iframe
function loadVisibleIframes() {
  const iframes = document.querySelectorAll('iframe[data-src]');
  iframes.forEach(iframe => {
    if (isInViewport(iframe)) {
      iframe.src = iframe.dataset.src;
      // 加载后移除data-src属性，避免重复处理
      iframe.removeAttribute('data-src');
    }
  });
}

// 防抖函数：减少滚动时的触发频率
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// 初始化：页面加载时先检查一次可见的iframe
window.addEventListener('load', loadVisibleIframes);
// 滚动时触发防抖后的加载逻辑
window.addEventListener('scroll', debounce(loadVisibleIframes, 100));
// 窗口大小改变时也检查（比如用户缩放窗口）
window.addEventListener('resize', debounce(loadVisibleIframes, 100));

怎么用？ #

1. 把上面的HTML写法替换你原本的iframe标签
2. 把JavaScript代码放到页面的<script>标签里（或者外部JS文件中）
3. 测试一下：滚动页面，当iframe进入视口时，它就会自动加载内容了

额外说明 #

• 防抖的100毫秒是可以调整的，数值越小触发越频繁，数值越大性能越好，100ms是比较均衡的选择
• 如果你的iframe有多个，这段代码会自动遍历所有带data-src的iframe，不用单独处理每个
• 页面加载完成时会先检查一次当前已经在视口的iframe，避免首屏的iframe也被懒加载

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