Tengo un temporizador de cuenta regresiva, al estilo de una barra, que disminuye lentamente de ancho.
Compruebe el siguiente código:
HTML
<div id="timer"><span></span></div>CSS
#timer { height: 30px; display: block; overflow: hidden; background: grey; } #timer span { width: 100%; height: 100%; display: block; background: green; -webkit-animation-name: decreasewidth; animation-name: decreasewidth; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 20000ms; animation-duration: 20000ms; } @keyframes decreasewidth { to { width: 0% } } @-webkit-keyframes decreasewidth { to { width: 0% } }Lamentablemente, la animación se detendrá cuando la página no esté en uso, p. navegar por otra pestaña o ventana. Entiendo que esto es común entre los navegadores y ayuda a ahorrar energía de procesamiento.
El problema es que quiero que mi temporizador sea preciso. Eso significa mantenerse fiel a su posición incluso cuando el usuario pasa a otras pestañas durante. ¿Cómo haría para lograr esto?
Al principio, mis pensamientos estaban en la línea de calcular la cantidad de ms que el usuario estuvo ausente de la página y luego actualizar el lapso del temporizador en consecuencia al regresar. Pero esto solo sucedería en el evento de focus , que depende de la actividad del usuario.
También probé una buena técnica javascript setInterval que simplemente actualizaba el ancho del lapso cada segundo. Esto no solo se veía terrible, sino que ocurrió el mismo problema. La mayoría de los navegadores aumentan el intervalo de tiempo cuando están inactivos.
Interesado en escuchar algunas ideas sobre cómo manejar esto.
TL;RD
Necesito una barra de temporizador de cuenta regresiva animada, que se mantenga fiel a su posición incluso cuando la página está inactiva.
EDITAR
Sé que esto se nota en Safari.
¿Qué tal usar transiciones CSS estándar y una línea de jQuery?
Puedes iniciar la barra de carga al 100%, con una transición de ancho de 20 segundos. Luego, cuando se cargue la página, agregue una clase que anule el ancho y lo establezca en 0. Debido a nuestra transición, disminuirá del 100 % al 0 % en el transcurso de 20 segundos.
Aquí hay un JSFiddle .
$(document).ready(function() { setTimeout(function() {$("#timer span").addClass("load");}, 1); }); #timer { height: 30px; display: block; overflow: hidden; background: grey; } #timer span { height: 100%; display: block; background: green; transition: 20s width linear; width: 100%; } #timer span.load{ width: 0%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="timer"><span class="init"></span></div>Parece que la API de visibilidad de la página junto con los cálculos de tiempo ausente lo harán. La documentación se puede encontrar aquí: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
Los eventos se activan cuando la ventana es visible/invisible, no es necesario hacer clic en la página para que se detecte. Exactamente lo que necesito.
IE 10+ mente. Aunque, no es un problema para mi aplicación: p