Galera, estou com uma aplicação embarcada onde nosso processador não é lá dos melhores, o que acaba dando alguns problemas.
Digamos que eu precise exibir imagens de 10 a 10 segundos, na teoria, seria só fazer um contadorzinho ali e esperar pra trocar a imagem, porém, nosso hardware por ser limitado, ele leva mais de 1s para processar a imagem na tela.
Pensei então em fazer um preload. Como? Tendo 2 divs, sendo uma principal e outra que irá fica alterando sua propriedade visibility para visible e hidden. Enquanto uma ta exibindo, antes de dar 10s, que seria a troca da outra, aos 7s eu iria carregar a imagem para depois só mudar a visibilidade para ela aparecer.
Aqui está um exemplo: https://jsfiddle.net/f8fy7mdj/3/
Não sei se consegui ser claro, mas, alguém consegue sugerir uma opção melhor pra isso?
Edição: De acordo com o amigo que postou no comentário que a imagem só é exibida quando é realmente exibida (no caso, quando não estiver invisível), cheguei a uma possível ideia:
E se eu sempre exibir as imagens, só alterando entre o z-index delas, mas sem deixar que elas fiquem invisíveis, teoricamente, estaria sendo pintada na tela, porém, estaria escondida atrás da outra esperando a hora de exibir. Segue um exemplo: https://jsfiddle.net/kmnkhoxo/2/
Acho que desse modo, se fosse com imagem, ele sempre estaria processando ela né?