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
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]+")");
}
.prueba{
height: 800px;
background-image: url(http://www.todopaisajes.com/1024x768/paisaje-de-flores.jpg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>