1. 普通的Iframe
代码:
<iframe src=”/path/to/file” frameborder=”0″ width=”728″ height=”90″ scrolling=”auto”> </iframe>
- iframe 在主页面之前加载
- iframe 要等所有内容下载完,才开始启动
- 主页面在iframe全部完成后,才开始加载。阻塞!阻塞!!
- 当iframe加载的时候,页面一直显示繁忙指示器。
2. iframe在主页面之后加载
代码:
<script>
//doesn’t block the load event
function createIframe(){
var i = document.createElement(“iframe”);
i.src = “path/to/file”;
i.scrolling = “auto”;
i.frameborder = “0″;
i.width = “200px”;
i.height = “100px”;
document.getElementById(“div-that-holds-the-iframe”).appendChild(i);
};
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener(“load”, createIframe, false);
else if (window.attachEvent)
window.attachEvent(“onload”, createIframe);
else window.onload = createIframe;
</script>
- iframe 在主页面完成加载后,才开始加载
- 主页面加载的时候,没有被iframe干扰
- 繁忙指示器依然存在。这是不好的地方。
3. 使用iframe setTimeout() 方法
因为对IE8无效,实际应用意义不大,在此略去
4. 采用动态异步调用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 在iframe的内容下载完就开始启动
- 主页面加载不受iframe影响
- 当iframe加载时,繁忙指示器消失了!
结论:
1. 因为iframe耗用比较多资源,做优化处理的时候又比较麻烦,尽量别采用。
2. 如果一定要用,推荐采用动态异步调用。无论是主页面加载时间,还是繁忙指示器的用户体验都有较好提升。
翻译自:Aaron Peters的博客
分享到:
相关推荐
使用iframe是因为他可以和主页面并行加载,不会阻塞主页面。当然使用iframe也是有利有弊的:Steve Souders在他的blog里面有阐述:Using Iframes Sparingly: iframe会阻塞主页面的onload事件 主页面和iframe共享同一...
通过延迟加载技术可以提升网站的性能,有需要的朋友可以下载看看啊。注意事项1、该源码采用了典型的三层架构技术。2、开发环境为Visual Studio 2012,数据库为SQL Server 2012,数据库文件在DB文件夹中,使用.net ...
1.前言 懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等.因此掌握lazy...
懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案。lazyload的核心是按需加载。在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等。因此掌握lazyload...
• 浏览器——你将发现:避免或取代iframe的方法、简化CSS选择符,以及其他技术。 对于当前的富媒体网站和Web 2.0应用程序来说,速度至关重要。在本书中,你将学习如何节省宝贵的网站加载时间,使其更快地响应...
虽然大部分开发人员在过去使用过XMLHttp或者使用Iframe来加载数据,但仅到现在我们才看到传统的开发人员和公司开始采用这些技术。就像新的编程语言或模型伴随着更多的痛苦,开发人员需要学习新的技巧及如何最好...
虽然大部分开发人员在过去使用过XMLHttp或者使用Iframe来加载数据,但仅到现在我们才看到传统的开发人员和公司开始采用这些技术。就像新的编程语言或模型伴随着更多的痛苦,开发人员需要学习新的技巧及如何最好...
虽然大部分开发人员在过去使用过XMLHttp或者使用Iframe来加载数据,但仅到现在我们才看到传统的开发人员和公司开始采用这些技术。就像新的编程语言或模型伴随着更多的痛苦,开发人员需要学习新的技巧及如何最好...
10.21 动态加载和切换页面 10.22 在页面切换时显示加载进度框 10.23 在屏幕旋转时更改显示样式 10.24 在列表框中实现加载更多效果 10.25 自定义选择菜单 10.26 使用多个选择菜单进行组合选择 10.27 使用多选菜单选择...
2.5 使用XML技术异步加载数据 2.5.1 IFrame 2.5.2 XMLDocument和XMLHttpRequest对象 2 5.3 向服务器发送请求 2.5.4 使用回调函数监视请求 2.5.5 完整的生命周期 2.6 Ajax有何不同 2.7 小结 2.8 资源 第3章 使AjaX...
1.引入 runwebim.js 脚本只会损耗很少资源(几乎可以忽略),只有运行 RunWebIM() 启动了 WebIM 才会动态加载样式和脚本; 2.只有登录成功后,WebIM 才会启动心跳包(每隔一段时间ajax请求数据); 3.启动心跳包后,...
111 <br>0184 如何在ASP.NET中获取文件的扩展名 111 <br>0185 如何在ASP.NET中用URL在页面之间传值 112 <br>0186 如何使用IsPostBack实现ASP.NET页面加载 112 <br>0187 如何利用输出缓存技术缓存...