经过JavaScript+IFRAME实现页面分屏加载

通过JavaScript+IFRAME实现页面分屏加载
前言：
为了篇幅太长会影响到阅读兴趣，代码都不粘贴太多，最好配合源码阅读，不然又些地方你会有点不明白。

问题？
往往在项目中会展现很高的页面，为了考虑加载速度，我们会使用延迟加载，刚开始我只进行图片延迟加载，其后又发现不妥，因为一个页面的加载并非只有图片，这样的话，我们可以需要为整个页面分屏加载显示。

整个思路如下：
考虑到分屏最简单的就是把页面截成单个的IFRAME，这里我们使用这种方式进行解决此问题。

先给大家介绍两个JS元素①
var frame= document.frames?document.frames[i].document:frame.contentDocument;
这样我们获得了 document，值得庆幸的是 他们都能兼容clientHeight元素。
这样我们就可以使用通用的js元素获取iframe的高度了。

frame.height = frame.body.clientHeight

如何获取到客户端浏览器类型，并解决像素差异问题？

if(navigator.userAgent.indexOf("Firefox")>0) { // Mozilla, Safari ..  frame.height = frame.body.clientHeight+20；} else if (navigator.userAgent.indexOf("MSIE")>0) { // IE  frame.height = frame.body.clientHeight+10；} 

在框架自适应高度的时候，我碰到一个问题，就是IE统计不到ifreame的高度进行自适应，而FF可以，是不是IE加载iframe不能立即获取高度，然后我尝试在iframe onload事件触发initHeight()，结果真的是IE的问题②。

<iframe id="frame3" onload="initHeight()" src="about:blank" width="100%" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>

部分源码：


扩展阅读：
如果你想在这个基础上扩展下这个功能，可用利用滚动条事件。
例如：优先加载当前屏幕的数据（在用户直接拖动滚动条到低端时候）

function initEvents(){  $(window).bind('scroll', function() {     var margin_top = $(document).scrollTop(); // 滚动条上部距顶高度  }}

① javascript 的对象、属性。
② 这个问题只是个人推断，可信度不足，但有几分嫌疑。

Thank of：
感谢凯哥、继超同学 的 引导和帮助。

作者：
郝世博@郑州升博世纪
邮箱：winhunter@163.com

这里还有很多不足，望大家多多批评，批评的同时别忘了指出缺陷。 1 楼 tedeyang 2010-12-30   用trunk分块输出。 2 楼 zzshengbo 2010-12-31   tedeyang 写道用trunk分块输出。
不太了解，但很想通过和你的交流，受到启发，同时让大家学习学习。 3 楼 tedeyang 2011-01-05   zzshengbo 写道tedeyang 写道用trunk分块输出。
不太了解，但很想通过和你的交流，受到启发，同时让大家学习学习。
不好意思，写错字了。是chunk
关于chunk的技术可以看这篇blog，写得很好。http://kb.cnblogs.com/page/77862/

查看更多 下一篇