MyException - 我的异常网
当前位置:我的异常网» JavaScript » 【补充】LazyLoad 延迟加载效果,该如何处理

【补充】LazyLoad 延迟加载效果,该如何处理

www.MyException.Cn  网友分享于:2013-02-10  浏览:35次
【补充】LazyLoad 延迟加载效果
新年期间,对上次写的LazyLoad效果做了些补充。

【resize】

先了解一下浏览器拖拉触发resize的方式。
例如在xp的系统性能选项中,设置是否“拖拉时显示窗口内容”会有不同的拖拉效果:
选择是的话,由于内容会跟着浏览器的拖拉同时渲染页面,导致resize事件的持续触发;
选择否的话,内容在拖拉完成才会渲染,并触发resize事件,即在拖拉过程中resize事件只会在确定后才触发一次;
不过ff有点特殊,即使选择否,它右下角的触发点还是会按照拖拉同时渲染页面的方式触发的。
后面测试时建议选择否,会比较准确看到结果。

再看看resize事件的支持情况。
在ie,haslayout的块级和内联元素都支持onresize事件,其他浏览器只有window对象支持。
而ie6/7跟ie8的支持程度也有不同,测试以下代码:
HTML code
<!doctype html>
<body>
<div id="show">0</div>
<div id="div" style="border:1px solid #000"></div>
<script>
var i = 0;
div.onresize = function(){ show.innerHTML = ++i; }
setTimeout('div.innerHTML="test"', 1000)
setTimeout('div.style.height="50px"', 2000)
</script>
</body>
</html>

在ie8两种情况都会触发onresize,但ie6/7只有第二种情况触发。
鉴于情况比较复杂,程序在使用window作为容器时才绑定事件,其他情况请自行设置。

resize事件有不少的问题,处理时要小心。
chrome的resize有一个问题(bug?),每次触发resize都会执行两次事件,或者说会触发两次。
而ie就复杂了,window, body和documentElement的resize会相互影响。
在ie8测试以下代码:
HTML code
 <!doctype html> 
<style>html,body{border:5px solid #06F;} </style>
<body> <div id="div" style="height:100px;"> </div> </body>
</html>
<script>
window.onresize = function(){ div.innerHTML += "window, "; }
//document.documentElement.onresize = function(){ div.innerHTML += "documentElement, "; }
//document.body.onresize = function(){ div.innerHTML += "body, "; }
</script>

当上下拖放时,onresize只会触发一次,但左右拖放时会触发两次。
换成documentElement会有差不多的结果,两个一起用的话左右拖放时documentElement会触发两次,window一次。
只设置body的话感觉就正常了,上下左右都只会触发一次。
而documentElement和body同时设置的效果跟documentElement和window的效果差不多。
如果window和body同时设置的话,后一个会覆盖前一个。
看来window和body的onresize对应的是同一个对象事件,可能为了在body设置也能做到window一样的效果。
个人推测,window和documentElement多出的一次,可能是同时触发了body的resize造成的。
ps:onresize时,用srcElement获取不到触发元素,所以确定不了是哪个元素触发。
ie7跟ie8的结果差不多,ie6就有些不同,不过估计也是盒模式的不同造成的。
具体产生原因还不清楚,这里我也很糊涂。

虽然问题弄不清楚,解决方法还是有的。

要绑定resize就是因为视框范围发生了变化,要重新设置视框范围,那么可以通过看两次resize之间视框范围有没有变化来确实是否执行程序。
在resizeDelay方法中,就是通过clientWidth和clientHeight来判断的:
HTML code
this.resizeDelay = function(){
    var clientWidth = container.clientWidth,
        clientHeight = container.clientHeight;
    if( clientWidth != width || clientHeight != height ) {
        width = clientWidth; height = clientHeight;
        oThis._delay( oThis.resize );
    }
};

ps:如果只需针对window,直接用innerHeight/innerWidth就不用理会文档模式了。


【延时加载】

一般情况下,触发程序会绑定到容器的scroll和resize事件中。
但很多时候scroll和resize会被连续触发执行,例如resize的bug,大量连续的执行大大降低效率。
为了防止无意义的连续执行,程序设置了一个_delay方法来做延时:
JScript code
var oThis = this, delay = this.delay;
if ( this._lock ) {
    this._timer = setTimeout( function(){ oThis._delay(run); }, delay );
} else {
    this._lock = true; run();
    setTimeout( function(){ oThis._lock = false; }, delay );
}


原理是用一个_lock属性,程序运行一次后_lock设为true,并用一个setTimeout延时设置它为false。
在锁定(_lock为true)期间,程序不会立即执行,达到延时的效果。
为了保证最后一次触发程序即使在锁定期间也能完成,还用了一个_timer来延时这次执行。

这种延时有什么好处,直接用setTimeout延时不是更简单方便吗?
首先直接用setTimeout只能保证最后一次程序能执行,而这种方式能保证第一次和最后一次都能执行。
直接用setTimeout更大的问题是,如果持续触发,会导致程序一直不能执行(前提是执行时有正确clear掉定时器),而这种方式能保证程序在时间段内执行一次。

还有一个方法是不绑定事件,只用setTimeout或setInterval来监听。
好处是没有连续触发的问题,也不会有resize的bug,但需要一直监听视框范围是否改变。
一般情况下,绑定事件效率应该比较好。

------解决方案--------------------

文章评论

5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
程序员必看的十大电影
程序员必看的十大电影
Java程序员必看电影
Java程序员必看电影
每天工作4小时的程序员
每天工作4小时的程序员
总结2014中国互联网十大段子
总结2014中国互联网十大段子
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员都该阅读的书
程序员都该阅读的书
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
我的丈夫是个程序员
我的丈夫是个程序员
如何成为一名黑客
如何成为一名黑客
程序员应该关注的一些事儿
程序员应该关注的一些事儿
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
10个调试和排错的小建议
10个调试和排错的小建议
程序员的鄙视链
程序员的鄙视链
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
编程语言是女人
编程语言是女人
中美印日四国程序员比较
中美印日四国程序员比较
旅行,写作,编程
旅行,写作,编程
鲜为人知的编程真相
鲜为人知的编程真相
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
我是如何打败拖延症的
我是如何打败拖延症的
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员和编码员之间的区别
程序员和编码员之间的区别
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
为什么程序员都是夜猫子
为什么程序员都是夜猫子
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
那些争议最大的编程观点
那些争议最大的编程观点
漫画:程序员的工作
漫画:程序员的工作
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
代码女神横空出世
代码女神横空出世
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有