I have an interval that runs each seven seconds. Alongside I have two gifs each lasting for seven seconds. I want to display one of the gifs in a div (here it is called face) based on some conditions, let's assume if Time is multiple of 14. The problem is that there is always a blackout (black page) between the transaction. What I want is a smooth transaction without the black frame. here is the simplified code:
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>I think an easy solution is you insert the <img src='1.gif'/> at html and "<img src='2.gif'/>" and use display:none or opacity:0 to hide it and switch it back using opacity:1 or display:revert every 7 seconds.
You have to give browser some time to load the gif you want and it is very hard to really make a technically smooth transaction, but by using opacity: 0 and display:none, the image will be loaded when the page is loading so there will be a smooth transaction.
A problem I have noticed, you said you want to let each gif last for 7 seconds, but then you said the first gif to display only when time is a multiple of 14 which means only 7*14 = 98 seconds it will display gif1, you could change Time%14 ===0 to Time%2 ===0 to fixed it.
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>Thanks to James I used style.opacity and solved the issue. However, it should be noted that just opacity or display could not solve the issue easily and therefore I finalized the code based on James' suggestion as bellow:
<!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>