2016-12-08 2 views
-1

지연() 및 setInterval() 함수를 사용하는 자바 스크립트 애니메이션이 있습니다. 모든 것이 잘 작동하지만 사용자가 다른 브라우저 탭을 열고 이전 탭으로 돌아갈 때 애니메이션 요소가 미친 듯합니다.location.reload()가 작동하지 않습니다.

해결책으로 사용자가 애니메이션 탭을 다시 방문 할 때마다 페이지를 다시로드해야하며 솔루션이 here 인 것 같습니다.

하지만 재로드 페이지는 localhost에서만 작동합니다. 동일한 코드가 원격 서버에서 작동하지 않습니다. 즉, 페이지를 다시 방문하여 페이지가 다시로드되지 않습니다. 여기

코드입니다 :

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]) {location.reload();} 
}; 

document.addEventListener(visibilityChange, handleVisibilityChange, false); 
+0

아마도 브라우저가 페이지를 캐싱하고 있으므로 다시로드해도 아무런 변화가 없습니다. – Barmar

+0

애니메이션 문제를 처리하기 위해 페이지를 다시로드 하시겠습니까?! 읽어야합니다 : [what-is-the-xy-problem] (http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) 적어도이 애니메이션이 jQuery를 사용하여 처리되는 경우 , 대신 일시 중지/재사용 가능하지만 페이지를 다시로드하지 마십시오 –

+0

@Barmar, 캐싱 여부, 페이지가 다시로드되면 애니메이션이 처음부터 시작되어야합니다. – bonaca

답변

1

내가 설명 할 수 있지만, 그 soluton이

location.href = location.href; 

대신

location.reload(); 

의 페이지는 로컬 및 원격에 다시로드 것 같다 섬기는 사람.

관련 문제