Estou tentando fazer um girador de carregamento simples que aparece ao navegar. Ele aparece usando um evento 'beforeunload' ao navegar para longe e usa o evento 'load' para se esconder novamente quando terminar.
O problema é que, quando deixo a página em segundo plano no telefone por algumas horas, o evento 'beforeunload' é acionado e exibe o botão giratório. Provavelmente porque o Chrome no Android está descarregando parcialmente a página para economizar memória. O spinner não desaparece por si só e não consigo descobrir como fazê-lo desaparecer novamente de uma maneira elegante.
Existe algum outro evento que eu deveria estar usando?
window.addEventListener("load", function() {
topSpinner.classList.add("closed");
});
window.addEventListener("beforeunload", function() {
topSpinner.classList.remove("closed");
});
javascript
android
google-chrome
Doskii
fonte
fonte
Respostas:
O Chrome 68 (julho de 2018) introduziu uma nova API de ciclo de vida da página : o diagrama de estado fornecido neste link não mostra a chamada do sistema (navegador)
beforeunload
antes de colocar a página nofrozen
estado, mas é claramente o que está acontecendo.Felizmente, a API introduziu dois novos eventos que são acionados quando a página entra e sai desse estado:
freeze
eresume
.Resolvi esse problema nos displays Chrome e WebView para dispositivos móveis simplesmente adicionando:
fonte
Mude o listerner do evento de carregamento para focar
fonte
Registrei eventos via Ajax no banco de dados. Meus testes mostraram que não é previsível quais eventos foram acionados (por exemplo, ao usar o PWA). Há
focus
,visibilitychange
,resize
ebeforeunload
envolvidos. Fiquei surpreso ao ativar a tela com o PWA ativo, às vezesbeforeunload
é o único evento registrado no banco de dados.Estou usando o seguinte código agora, que parece funcionar sem efeitos colaterais:
fonte
Tente manter um sinalizador de carregador via
localStorage
, portanto, se a página for recarregada, verifique o sinalizador novamente:Pseudo código abaixo:
fonte
setTimeout
apósx
segundos, portanto, na pior das hipóteses, você terá que esperarx
segundos para ver a página novamente. Além disso, o uso de um timer que funciona o tempo todo para este caso especial não é realmente inovador.