Esegui codice solo se il visitatore visualizza la pagina web

Question

Mi piacerebbe riprodurre un'animazione e assicurarmi che il visitatore possa vederlo. Il mio problema è che, quando qualcuno apre una nuova scheda del browser in background (ad esempio facendo clic su un collegamento con target="_blank"), l'evento pronto del documento non è sufficiente, perché c'è la possibilità che il visitatore guardi quel sito solo dopo alcuni minuti, quindi non vedrà l'animazione dall'inizio o qualcosa del genere.

C'è un modo per avviare la mia animazione (eseguendo la corretta funzione JavaScript) solo quando l'utente fa clic sulla scheda del browser? Esiste un evento o una soluzione alternativa che simuli questo comportamento? Non importa se il codice verrà eseguito solo la prima volta o ogni volta che l'utente fa clic sulla scheda del browser.

Answer 1

Prova requestAnimationFrame. Se la scheda non è attiva, la cornice dell'animazione non si verificherà fino a quando non lo è.

Io lo uso per rinviare "aggiornamento automatico" su alcune delle mie pagine, e funziona sicuramente - ho anche ottenuto un feedback positivo su di esso :)

Answer 2

Secondo questa risposta: How to tell if browser/tab is active

Puoi vedere se una scheda è attiva usando gli eventi window.onfocus e window.onblur.

var isActive; 

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

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