Execute code only if visitor see the webpage

Question

I would like to play an animation and make sure that the visitor will see that. My problem is that, when somebody opens a new browser tab in the background (for example by clicking a link with target="_blank") then the document's ready event is not enough, because there is a chance that the visitor will watch that site only after a few minutes, so he won't see the animation from the beginning or anything at all.

Is there a way to start my animation (by running the proper JavaScript function) only when the user clicks to that browser tab? Is there an event or any other workaround that would mimic this behavior? It doesn't matter if the code will be executed only on the first time or every time the user clicks to the browser tab.

Or: http://stackoverflow.com/questions/1760250/how-to-tell-if-browser-tab-is-active — Adriano Repetti, Jun 17 '14 at 15:26

score 7 · Accepted Answer · edited Jun 18 '14 at 08:11

7

Try requestAnimationFrame. If the tab is not active, then the animation frame will not occur until it is.

I use this to defer "auto-update" on some of my pages, and it certainly works - I've even gotten positive feedback on it :)

edited Jun 18 '14 at 08:11

brasofilo

25,496
15
91
179

answered Jun 17 '14 at 15:25

Niet the Dark Absol

320,036
81
464
592

It's nice but it works only from IE 10. gotta mention, somebody still have to work with 9 and 8. – Adriano Repetti Jun 17 '14 at 15:28

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

According to this answer:How to tell if browser/tab is active

You can see if a tab is active using window.onfocus and window.onblur events.

var isActive;

window.onfocus = function () { 
  isActive = true; 
}; 

window.onblur = function () { 
  isActive = false; 
};

edited May 23 '17 at 12:08

Community

1
1

answered Jun 17 '14 at 15:36

Delayer

409
1
5
17

Execute code only if visitor see the webpage

2 Answers2