0

I am trying to simulate a video by switching image-frames via javascript. This works perfectly in Chrome while in Firefox (and IE/Edge) the background is shown while updating the frame. This occurs only the first time the image-source is rendered. It seems like the images are not in cache, however the network console shows that they get preloaded correctly.

The way the images are being replaced doesn't seem to matter. I tried changing the source from images/divs as well as controlling them via display, visibility, opacity and even by rearranging the z-index. The way I apply the css to it via jQuery (hide/show, animate, css) also seems to be indifferent. It doesn't even matter if other visible frames are "below" the current frame, it always flashes the background.

I managed to recreate the error:

https://jsfiddle.net/kL54ckLp/
Paul
  • 1
  • 1
  • We need it all dumped in a fiddle so can test and see the issue to advise what could be wrong. – MartinWebb Apr 16 '17 at 22:59
  • Possible duplicate of [How to know when browser finish to process an image after loading it?](http://stackoverflow.com/questions/39543290/how-to-know-when-browser-finish-to-process-an-image-after-loading-it) – Kaiido Apr 17 '17 at 01:34

0 Answers0