How to smooth the transaction between gifs display in JavaScript?

user_11112577 0
Viewed 52

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>

css html javascript
2 Answers

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>

user_177436470

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>
user_111125770
Related