优化js代码一段 ff和ie执行缓慢
日期：2014-05-16 浏览次数：20406 次
求助优化js代码一段 ff和ie执行缓慢
请高人指点一下这段为什么只在opera和chrome上可以正常执行
ie和ff下卡到爆
同事用的猎豹下没完没了的上下反转...
------解决方案--------------------
比如滚动条在1,2,3,4,5,6,20,50,99时都触发了事件,就导致会执行多次动画.
做个变量存储动画结果判断下是否应该执行动画功能就OK了.
------解决方案--------------------
每次滚动都执行animate肯定慢，跟浏览器无关，放弃animate吧，直接css top:0
请高人指点一下这段为什么只在opera和chrome上可以正常执行
ie和ff下卡到爆
同事用的猎豹下没完没了的上下反转...
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>无标题文档</title>
<style type="text/css">
*{
border:0px;
margin:0px;
padding:0px;
}
.wrap{
height:50px;
margin:100px 0 0 -200px;
overflow:hidden;
position:fixed;
left:50%;
width:400px;
}
.con{
font:13px/50px "Microsoft YaHei","微软雅黑",Arial;
height:100px;
width:400px;
position:absolute;
top:-50px;
left:0px;
}
.content{
background:#db3838;
color:#fff;
line-height:50px;
text-align:center;
}
.bg_bottom_con{
background:#0072bc;
}
.blank{
height:2000px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
$(window).scroll(function(){
if($(this).scrollTop() > 99) {
$(".con").animate({
top:"0px"
},150);
}else{
$(".con").animate({
top:"-50px"
},150);
}
});
</script>
</head>
<body>
<div class="wrap">
<div class="con">
<div class="content">大于100px</div>
<div class="content bg_bottom_con">小于100px</div>
</div>
</div>
<div class="blank"></div>
</body>
</html>
------解决方案--------------------
比如滚动条在1,2,3,4,5,6,20,50,99时都触发了事件,就导致会执行多次动画.
做个变量存储动画结果判断下是否应该执行动画功能就OK了.
------解决方案--------------------
每次滚动都执行animate肯定慢，跟浏览器无关，放弃animate吧，直接css top:0
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
