iframe预加载小记

最新推荐文章于 2024-03-25 16:14:51 发布

weixin_30416497

最新推荐文章于 2024-03-25 16:14:51 发布

阅读量721

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/AndyWithPassion/archive/2011/12/27/iframe_load.html

版权

昨天博客园上看到一篇《iframe异步加载技术与性能》，感觉不错，感谢该博主的分享,对前端性能感兴趣的朋友可以研究下,这里我不准备对原文进行重复,只是做个记录, 对博文中提到的Meebo工程师的印象较深, 所以自己也做了个小例子,用firebug的net面板看了下, 顺便说一下iframe用于预加载也是一个相对不错的选择,这里有篇文章大家也可以参考《用javascript预加载图片、css、js的方法研究》.下面我就贴出我的代码, 只为正好看到此文的你提供个参考,顺便让自己加深印象.

 1 (function(doc) {
 2     var ifr = doc.body.appendChild(doc.createElement('iframe')),
 3         ifr_doc = ifr.contentWindow.document;
 4          
 5     ifr.frameborder = '1px';
 6     ifr.height = '1px';
 7     ifr.width = '1px';
 8     ifr.style.display = 'none';
 9      
10     var loadjs = '<body οnlοad="' + 
11                  'var d = document;d.getElementsByTagName(\'head\')[0].appendChild(' + 
12                  'd.createElement(\'script\')).src' + 
13                  '=\'javascript/jquery-1.7.js\'">';
14      
15     ifr_doc.open();
16     ifr_doc.write(loadjs);
17     ifr_doc.close();
18 })(document);
19  
20 $('loadBtn').addEvent('click', function() {
21     var script = document.createElement('script');
22     script.async = true;
23     script.src = 'javascript/jquery-1.7.js';
24     document.getElementsByTagName('head')[0].appendChild(script);
25 });

这里我用Meebo工程师提到的技术,预先加载了jquery-1.7.js, 由于创建的iframe内容一开始是空的, 后来通过给iframe的body内联属性onload设置了一段脚本, 脚本的作用就是动态加载jquery-1.7.js, iframe被加入原页面body后, 其load事件会立即触发, 这样iframe自身对原页面的加载性能(比如说会推迟原页面load事件的时间点)影响较小, 之后我们如果再用#loadbtn去加载jquery-1.7.js,花的时间很短只有10ms左右(从cache中取出).

转载于:https://www.cnblogs.com/AndyWithPassion/archive/2011/12/27/iframe_load.html

weixin_30416497

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe预加载小记

昨天博客园上看到一篇《iframe异步加载技术与性能》，感觉不错，感谢该博主的分享,对前端性能感兴趣的朋友可以研究下,这里我不准备对原文进行重复,只是做个记录, 对博文中提到的Meebo工程师的印象较深, 所以自己也做了个小例子,用firebug的net面板看了下, 顺便说一下iframe用于预加载也是一个相对不错的选择,这里有篇文章大家也可以参考《用javascript预加载图片、css、js的...
复制链接

扫一扫