js轮播浏览器页面在切换后出现混乱或空白现象的解决方法

问题:从轮播页切到其他标签页过一段时间再切回该页面,轮播会出现加速动画或者空白现象,一会又自动恢复正常的问题。


思路:首先排错,检查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");
    ...
}

 

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值