d.a*_*iel 11 html javascript php pageload page-load-time
我有一个网站(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>
Run Code Online (Sandbox Code Playgroud)
我的页面加载时间有时是两位数.我理解为什么会这样,但我不确定如何解决它.我想用以下两种方法修复它:
Iframe setTimeout()
Run Code Online (Sandbox Code Playgroud)
或者:动态Asynch 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>
Run Code Online (Sandbox Code Playgroud)
使用这两种方法,我如何全局地将其应用于整个网站的所有iframe?我认为不可能单独更改每个iframe.
小智 1
我想你最好在输出之前将所有 iframe 替换为 php 模板中所需的加载解决方案。使用正则表达式,像这样<iframe.*src="([^"]*)".*\/iframe>。我想用真实的 iframe url 替换包含加载 gif 和 data-src 属性的 iframes width div 是一个很好的解决方案。然后在页面加载后使用js加载div内的iframe。
| 归档时间: |
|
| 查看次数: |
202 次 |
| 最近记录: |