问题:从轮播页切到其他标签页过一段时间再切回该页面,轮播会出现加速动画或者空白现象,一会又自动恢复正常的问题。
思路:首先排错,检查js代码正常,定时器也正常该开启的开启,该关闭的关闭。
查了资料发现是浏览器页面切换后,页面的定时任务还是在不停执行,但是页面图片滚动动画效果由于浏览器控制,一直没有得到执行;当回到页面时,动画效果会累计连续一起把前面的动画效果执行了,故而出现了以上情况。简单的说就是动画效果被积累起来了,要想解决该问题我觉得在切换回轮播页清除之前积累的动画就ok啦。
解决:
1.blur和focus
//页面聚焦时开启定时器
window.onfocus = function () {
ds = setInterval(function () {
self.lb()
}, 5000)
}
//页面失去焦点也就是切换页面时清除定时器
window.onblur = function () {
clearInterval(ds) //清除定时器
}
2.$("you img container").stop(true,true);要在动画开始之前清除
function lb(obj){
clearInterval(ds);
$("#xxx").stop(true,true);
$("#xxx").animate({...},"normal");
...
}