Desarrolle un pequeño slideshow pero al momento de cargar las imagenes por primera vez aparece un parpadeo muy molesto, tiempo despues de que las imagenes ya fueron cargadas no vuelve aparecer ese parpadeo.
no quiero utilizar esta forma, quiero poder resolverla de la forma que tengo.
<img src="http:..." style="display:none" >
<img src="http:..." style="display:none" >
<img src="http:..." style="display:none" >
<script>
$('#id').hide();
$('#id').show();
</script>
Esta es mi codigo que tengo
<!DOCTYPE html>
<html>
<head>
<title>prueba</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
.prueba{
height: 800px;
background-image: url(http://www.todopaisajes.com/1024x768/paisaje-de-flores.jpg);
}
</style>
<div class="prueba">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>
<script type="text/javascript">
var slideIndex = 0;
var img = [
"http://www.todopaisajes.com/1024x768/paisaje-de-flores.jpg",
"http://www.todopaisajes.com/1024x768/paisaje-natural-en-el-campo.jpg",
"http://www.todopaisajes.com/1024x768/paisaje-rural-del-campo.jpg",
"http://v3wall.com/wallpaper/1024_768/1005/1024_768_20100517121753395086.jpg"
];
setInterval(function(){setImage(1)}, 3000);
function plusDivs(n) {
setImage(n);
}
function setImage(n){
slideIndex = slideIndex + n;
if(slideIndex > 3){
slideIndex = 0;
}else if(slideIndex < 0){
slideIndex = 3;
}
$('.prueba').css("background-image", "url("+img[slideIndex]+")");
}
</script>
</body>
</html>