Tengo un intervalo que corre cada siete segundos. Al lado tengo dos gifs cada uno con una duración de siete segundos. Quiero mostrar uno de los gifs en un div (aquí se llama cara) según algunas condiciones, supongamos que el tiempo es múltiplo de 14. El problema es que siempre hay un apagón (página negra) entre la transacción. Lo que quiero es una transacción fluida sin el marco negro. aquí está el código simplificado:
const face = document.getElementById('face'); var one = "<img src='1.gif'/>"; var two = "<img src='2.gif'/>"; Time = 0; function myTimer() { Time = Time + 1; if (Time%14 ===0){ console.log("gif one"); face.innerHTML = one; }else{ console.log("gif two"); face.innerHTML = two; } } var myVar = setInterval(myTimer, 7000); <div class="content"> <div id="face"> </div> </div>Creo que una solución fácil es insertar <img src='1.gif'/> en html y "<img src='2.gif'/>" y usar display:none u opacity:0 para ocultarlo y cambiar vuelve a usar opacity:1 o display:revert cada 7 segundos.
Debe darle al navegador algo de tiempo para cargar el gif que desea y es muy difícil hacer una transacción técnicamente fluida, pero al usar opacity: 0 y display: none, la imagen se cargará cuando se cargue la página, por lo que habrá ser una transacción fluida.
He notado un problema, dijiste que querías que cada gif dure 7 segundos, pero luego dijiste que el primer gif se mostrara solo cuando el tiempo sea un múltiplo de 14, lo que significa que solo 7*14 = 98 segundos mostrará gif1, podría cambiar Time%14 ===0 a Time%2 ===0 para arreglarlo.
const face = document.getElementById('face'); var one = document.getElementById('img1') var two = document.getElementById('img2') Time = 0; function myTimer() { Time = Time + 1; if (Time%14 ===0){ one.style.opacity = 1 two.style.opacity =0; console.log('gif1') }else{ one.style.opacity = 0; two.style.opacity =1; console.log('gif2') } } var myVar = setInterval(myTimer, 7000); img{ opacity: 0; position: absolute; left:20px; top:20px; } <div class="content"> <div id="face"><img id ='img1' src='1.gif'/> <img id='img2' src='2.gif'/></div> </div>Gracias a James, usé style.opacity y resolví el problema. Sin embargo, debe tenerse en cuenta que solo la opacidad o la visualización no pudieron resolver el problema fácilmente y, por lo tanto, finalicé el código según la sugerencia de James de la siguiente manera:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Talk</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="content"> <div id="face"> <img id ='img1' src='1.gif'/> <img id= 'img2' src='2.gif'/> </div> </div> <script type="text/javascript"> const face = document.getElementById('face'); var one = document.getElementById('img1') var two = document.getElementById('img2') Time = 0; function myTimer() { Time = Time + 1; if (Time%2 ===0){ one.style.opacity = 1; two.style.opacity = 1; function myTimer2(){ two.style.opacity = 0; } var myVar2 = setTimeout(myTimer2, 500) }else{ one.style.opacity = 1; two.style.opacity = 1; function myTimer3(){ one.style.opacity = 0; } var myVar3 = setTimeout(myTimer3, 500) } } var myVar = setInterval(myTimer, 5000); </script> </body> </html>