YouTube iframe懒加载在Chrome初始加载时仍触发相关脚本加载问题

问题根因 #

你当前的逻辑存在时序错误：只要检测到浏览器支持原生iframe懒加载，就会在脚本执行时立刻将所有对应iframe的data-src赋值给src属性。Chrome在DOM尚未完成渲染、还未计算元素位置的阶段拿到iframe的src，就会直接触发资源加载，无视loading="lazy"属性；而Safari的原生懒加载实现会在src赋值后额外做一次可见性判断，所以表现符合预期。

修复方案 #

方案1：纯原生实现（无第三方依赖，兼容Chrome 77+、Firefox 79+、Safari 15.4+）

无需额外JS逻辑，直接把iframe的data-src改为普通src属性，保留loading="lazy"即可，浏览器会自动根据元素可见性控制加载时机：

<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/xxxxxxx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

注意必须给iframe设置明确的宽高属性，否则浏览器无法提前计算元素位置，会默认直接触发加载。

方案2：全浏览器兼容方案

如果需要兼容低版本浏览器，直接统一用LazySizes处理所有懒加载逻辑，不需要判断原生支持，所有浏览器表现一致：

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/xxxxxxx" class="lazyload" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<script>
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
document.body.appendChild(script);
</script>

方案3：保留原有兼容逻辑的修正版

如果要兼顾原生懒加载减少第三方依赖，只需把赋值src的逻辑延后到DOM完全渲染完成后执行即可：

<iframe loading="lazy" width="560" height="315" data-src="https://www.youtube.com/embed/xxxxxxx" class="lazyload" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<script>
if ('loading' in HTMLIFrameElement.prototype) {
  document.addEventListener('DOMContentLoaded', () => {
    const iframes = document.querySelectorAll('iframe[loading="lazy"]');
    iframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });
  });
} else {
  const script = document.createElement('script');
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
  document.body.appendChild(script);
}
</script>

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