如何防止 YouTube js 调用减慢页面加载速度

Question

我正在使用 https://gtmetrix.com 来诊断我的页面速度问题。

有 问题的页面 有一个嵌入的 YouTube 视频，GTMetrix 说这个视频的 JS 调用正在减慢页面加载速度。

这是正在进行的调用：

 <iframe width="640" height="360" src="https://www.youtube.com/embed/PgcokT0AWHo" frameborder="0" allowfullscreen></iframe>

原文由 Genadinik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑：截至 2019 年 10 月，这不再有效（感谢@CpnCrunch 的更新）。 对于不影响用户体验的情况，您显然可以在页面加载后添加 1000 毫秒超时以使其生效。

这是一个使用纯 JS 解决方案在页面加载时动态分配 src 的示例。使用事件侦听器而不是 window.onload 因为对于后者，只能设置一个事件并且它将覆盖任何先例 window.onload 事件：

 <iframe id="videoFrame" width="640" height="360" src="" frameborder="0" allowfullscreen></iframe>
<script>
function setVideoFrame(){
  document.getElementById('videoFrame').src = 'http://example.com/';
}
if (window.addEventListener)  // W3C DOM
  window.addEventListener('load', setVideoFrame, false);
else if (window.attachEvent) { // IE DOM
  window.attachEvent('onload', setVideoFrame);
}else{ //NO SUPPORT, lauching right now
  setVideoFrame();
}
</script>

请注意，该脚本可以在代码中的任何位置，但如果不支持事件侦听器（现在的浏览器不太可能），该函数会立即启动，因此它至少应该在 iframe 之后 --- 元素。

原文由 Kaddath 发布，翻译遵循 CC BY-SA 4.0 许可协议