setInerval实现图片滚动离开页面后又返回页面时图片加速滚动问题解决
程序员文章站
2022-03-10 16:46:25
问题: setInerval实现图片滚动,离开页面后又返回页面时图片加速滚动 代码本身实现方案: 在每次页面加载的时候会清除定时器。 问题产生原因: 由于在加载了图片滚动的页面之后,又去到了其他页面,但是定时器没有停止,而页面又没有显示在用户面前,当返回页面的时候,就会把之前定时器中已经移动的图片动 ......
问题:
setinerval实现图片滚动,离开页面后又返回页面时图片加速滚动
代码本身实现方案:
在每次页面加载的时候会清除定时器。
问题产生原因:
由于在加载了图片滚动的页面之后,又去到了其他页面,但是定时器没有停止,而页面又没有显示在用户面前,当返回页面的时候,就会把之前定时器中已经移动的图片动画一股脑移动,就会出现如题所述加速滚动的效果。
解决办法:
监听页面是否显示在用户面前,是:重新走定时器方法,否,清除定时器。
以下判断页面是否展示的方法,在安卓5.0 等低版本系统下不生效。
function bannerscroll() { let imagebox = document.getelementbyid("imagebox"); imagebox.classlist.remove('roll-animation-3'); imagebox.classlist.remove('roll-animation-2'); imagebox.classlist.remove('roll-animation-1'); const bodywidth = document.body.clientwidth; const bodyheight = document.body.clientheight; const v1 = ((320 / 250) + (320 / 90)) / 2; //320*250尺寸比边界值 const ratio = bodywidth / bodyheight; let leftimage = new image(); leftimage.src = window.campaign.image_url; let leftimagewidth = ""; let leftimageheight = ""; let adleft = document.getelementbyid("adleft"); leftimage.onload = function () { leftimagewidth = leftimage.width; leftimageheight = leftimage.height; let imagerealheight = adleft.offsetwidth * (leftimageheight / leftimagewidth); // 设置所有图片的高度相同,否则会出现图片拼接不居中问题 let imageitem = array.from(document.getelementsbyclassname('image-item')); for(let item of imageitem){ item.style.height = imagerealheight+'px'; } if (ratio < v1) { // 适配 320*250 设计图样式,停留3s slider(imagerealheight, 4000, "roll-animation-1") } else { // 不停留,直接滚动,1s速度跟css 动画速度保持一致 slider(imagerealheight, 3000, "roll-animation-3") } } } var scrolltimer ;// 定义banner滚动定时器 var hidden, visibilitychange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilitychange = "visibilitychange"; } else if (typeof document.mshidden !== "undefined") { hidden = "mshidden"; visibilitychange = "msvisibilitychange"; } else if (typeof document.webkithidden !== "undefined") { hidden = "webkithidden"; visibilitychange = "webkitvisibilitychange"; } function handlevisibilitychange() { if (document[hidden]) { //页面失去焦点也就是切换页面时清除定时器 clearinterval(scrolltimer) //清除定时器 console.log("失去焦点"); } else { //页面聚焦时开启定时器,即重新初始化banner图片滚动 bannerscroll() console.log("得到焦点"); } } // 判断浏览器的支持情况 if (typeof document.addeventlistener === "undefined" || typeof document[hidden] === "undefined") { console.log("不支持检测页面焦点获取。"); } else { // 监听visibilitychange事件 document.addeventlistener(visibilitychange, handlevisibilitychange, false); } // 图片向上滚动,暂停3s function slider(imagerealheight, interval, rollclass) { clearinterval(scrolltimer); let imagebox = document.getelementbyid("imagebox"); imagerealheight = parsefloat(imagerealheight); let clientheight = parsefloat(document.body.clientheight); let edgelength = (clientheight - imagerealheight) / 2; const imagehtml = imagebox.innerhtml; imagebox.innerhtml = imagehtml + imagehtml + imagehtml; imagebox.style.top = -(imagerealheight - edgelength) + 'px'; let count = 0; scrolltimer = setinterval(() => { imagebox.classlist.add(rollclass); const inittop = -(imagerealheight - edgelength) + 'px'; if (count++ === 30) { imagebox.classlist.remove(rollclass); imagebox.innerhtml = imagehtml + imagehtml + imagehtml; imagebox.style.top = inittop; count = 0; } else { imagebox.innerhtml = imagebox.innerhtml + imagehtml; imagebox.style.top = parsefloat(imagebox.style.top) - (imagerealheight) + 'px'; } }, interval) }
bannerscroll();// 执行图片滚动方法
上一篇: redis主从架构的搭建及添加哨兵