2

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)">&#10094;</button>
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

1 respuesta 1

4

Ese parpadeo se debe a que las imágenes necesitan un tiempo para cargarse la primera vez que las muestras.

Para solucionarlo, puedes pre-cargar las imágenes utilizando el pseudo-elemento ::before o ::after.

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);
}

.prueba::before{
    position:absolute; 
    width:0; 
    height:0; 
    overflow:hidden; 
    z-index:-1;
    content:url("http://www.todopaisajes.com/1024x768/paisaje-de-flores.jpg")
            url("http://www.todopaisajes.com/1024x768/paisaje-natural-en-el-campo.jpg")
            url("http://www.todopaisajes.com/1024x768/paisaje-rural-del-campo.jpg") 
 url("http://v3wall.com/wallpaper/1024_768/1005/1024_768_20100517121753395086.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)">&#10094;</button>
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.