Argthtjtr

I have a problem with looped fade-in/fade-out image source changing in JS and CSS and using SetTimeout() callback.
The problem is, that the sequence is working strange: sometimes the image changes before the transition starts, sometimes it works fine, and sometimes in the other way.

Here is my JS:

const animationTime = 5000;

const transitionTime = 500;



function nextImage() {



  let img = document.getElementById('img1');

  img.classList.remove('hidden');

  setTimeout(function () {

    img.classList.add('hidden');

  },animationTime-transitionTime);

  img.src=randomize();

  setTimeout(nextImage, animationTime);

}

• 
  randomize() function just gets a random image path from array.

Here is HTML:

<div class="some-class">

    <img class="some-image" id="img1" src="1.png">

</div>

And here is CSS:

.some-image {



  transition: opacity 0.5s linear;

  -webkit-transition: opacity 0.5s linear;

  -o-transition: opacity 0.5s linear;

  -moz-transition: opacity 0.5s linear;

  -moz-border-radius: 15px;

}



.hidden {

opacity: 0;

}

Upd.
So I have edited CSS file:

.some-image {

    width: 370px;

    height: 190px;

    animation: fade-out;

    animation-duration: 1s;

}



.hidden {

    animation: fade-out;

    animation-duration: 1s;

}



@keyframes fade-in {

    from {opacity: 0;}

    to {opacity: 1;}

}



@keyframes fade-out {

    from {opacity: 1}

    to {opacity: 0}

}

And JS-file:

function nextImage() {



        let img = document.getElementById('img1');

        img.classList.remove('hidden');

        setTimeout(function () {

            img.classList.add('hidden');

        },animationTime-1000);

        img.src=randomize();



    }

    setTimeout(nextImage, animationTime);

}

And, somehow, it works perfectly on a local machine, but on a dedicated website animation sometimes fades-in before the image source changed.

You should try using css animations instead. You can easily implement the above with it, and it will save you the trouble of handling animations in your code.

I think the problem is about timing. The setTimeout function didn't guarantee to execute exactly time as argument set. So there is a possibility that you change the src of image before/after it add/remove hidden class. These delay is rarely happens that might be the reason why it works on your machine.

So this problem can solve by every time you change the image you must have to make sure the image is completely hide.

const nextImage = function () {

  let img = document.querySelector('img')



  img.classList.add('hidden')



  setTimeout(() => {

    img.style.visibility = 'hidden'

    img.src = randomImage()



    // skip to next frame, may be this not necessary to use setTimeout

    setTimeout(() => {

      img.style.visibility = ''

      img.classList.remove('hidden')

    }, 10)

  }, animationDuration)



  setTimeout(nextImage, intervalDuration + animationDuration)

}

The new cycle will be: fade image out, wait for animation then change image (with set visibility to hidden) and then fade in. And loop.

With this approach. If setTimeout is early execute before the image has completely fade out the visibility will be set hidden. If it's delayed, the image will be hide a bit longer.

Live example here. In that code I add a little bit noise with random time to test.

Unfortunately, After I spent an hour to see my answer is right I still feel it's not perfect anyway and it will be worse if you image is large. I would recommend you try two or more img tags instead.