iframe 问题需要减少页面加载时间答案

【问题标题】：Iframe issue need to decrease pageload timeiframe 问题需要减少页面加载时间
【发布时间】：2016-11-19 01:37:21
【问题描述】：

我有一个网站（wordpress），上面有几千个帖子。帖子将如下所示：

[tab:source1]
<iframe width="560" height="315" src="https://www.youtube.com/embed/U3rKPexoEcA" frameborder="0" allowfullscreen></iframe>
[tab:source2]
<iframe src="https://player.vimeo.com/video/60718161?title=0&byline=0&portrait=0&badge=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/60718161">HOW TO SHARPEN PENCILS</a> from <a href="https://vimeo.com/pricefilms">Pricefilms</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
[tab:source3]
<iframe width="640" height="360" src="http://www.worldstarhiphop.com/embed/100588" frameborder="0" allowfullscreen></iframe>

我的页面加载时间有时是两位数。我理解为什么会发生这种情况，但我不知道如何解决它。我想用以下两种方法修复它：

Iframe setTimeout()

或者：如下所示的动态异步 iframe：

<script>
(function(d){
  var iframe = d.body.appendChild(d.createElement('iframe')),
  doc = iframe.contentWindow.document;

  // style the iframe with some CSS
  iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;";

  doc.open().write('<body onload="' + 
  'var d = document;d.getElementsByTagName(\'head\')[0].' + 
  'appendChild(d.createElement(\'script\')).src' + 
  '=\'\/path\/to\/file\'">');

  doc.close(); //iframe onload event happens

  })(document);
</script>

无论使用哪种方法，我如何将其全局应用于整个网站的所有 iframe？我认为不可能单独更改每个 iframe。

【问题讨论】：

标签： javascript php html pageload page-load-time

【解决方案1】：

我猜你最好在输出之前用你想要的 php 模板中的加载解决方案替换所有 iframe。使用正则表达式，例如<iframe.*src="([^"]*)".*\/iframe>。我想用真实的 iframe url 替换包含加载 gif 和 data-src 属性的 iframe 宽度 div 是一个很好的解决方案。然后在页面加载后使用js在div中加载iframe。

【讨论】：