I have a javascript animation which uses delay() and setInterval() functions. Everything works fine but animation elements become crazy when user opens another browser tab and goes back to the previous tab.
As a solution I need to reload the page each time a user is visited the animation tab again and it seems the solution is here.
But I see that reloading page works only on localhost. The same code doesn't work on remote server i.e. page is not reloaded by revisiting the page.
Here is the code:
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);
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…