时间戳

首页 > 解决方案 > 如何防止 YouTube js 调用减慢页面加载速度

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

问题描述

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

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

这是正在拨打的电话：

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

标签： javascriptyoutubepageloadpage-load-timegtmetrix

解决方案

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

这是一个src使用纯 JS 解决方案动态加载页面的示例。使用事件侦听器而不是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元素之后。

推荐阅读