自己写轮播图时,发现轮播图效果在切换页面后,首先会有一段加速过程,之后才会正常播放。这是什么原因呢?
今天我们来解决这个问题。
下面开始。
原因是浏览器本着节省内存的原则,在页面切换到其他页面时,定时器不运动,但是动画依然排列,当切换回来的时候,动画加速运动,出现错误,在轮播图之类的页面经常会发生这样的情况
具体需要三个知识点
- document.onvisibilitychange
只要页面发生变化,就会触发这个事件 - document.hidden
这个是指当页面不是当前页面时为true,否则为false - document.visibilityState
visible 表示当前网页是可见或者是部分可见的。
hidden:当前网页是不可见的
prerender 网页内容被预渲染并且用户不可见
unloaded 如果文档被卸载,那么这个值将被返回解决setInterval在浏览器切换中的问题:
思路:如果页面是不可见的,那么我们就会清除定时器,如果页面是可见的,那么我们就重新开启定时器。
所以我们需要用document.onvisibilitychange
进行监听,然后用document.visibilityState
或者是document.hidden
进行判断。
实际操作:1
2
3
4
5
6
7document.onvisibilitychange=function(){
if(document.visibilityState=="visible"){
timer=setInterval(slidemove, 1000);
}else{
clearInterval(timer);
}
}
jq中animate的解决
如果用的是jq的animate这个方法,就只需要到这个方法的前面加上stop(true,true)
1 | $(".slidePanel").stop(true,true).animate({ |
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!