2

Ok, aquí está este fiddle tomado de esta pregunta. Como pueden ver, cuando se va a hacer el cambio entre los dos gifs, se da una especie de destello blanco.

¿Hay alguna manera de eliminar esto?

2
  • ¿para que usas la variable v?... es lo que causa el pantallazo ya que se tiene que volver a cargar la imagen cuando se incrementa el valor pues es una nueva url. si siempre es la misma imagen, no necesitas hacerlo y tomara la imagen de la cache. saludos. Prueba comentado v++ y poniendo el valor a 1 y veras a que me refiero. jsfiddle.net/qynvg44b/19 Commented el 27 jul. 2016 a las 20:51
  • @rnd porque la idea es que cuando el usuario haga scroll hacia arriba y se coloque el mismo gif (que solo muestra la animacion una vez) el gif se vuelva a animar. Si comento la v, me elimina ciertamente el pantallazo PERO si te fijas, el gif queda en el último frame
    – Caro
    Commented el 27 jul. 2016 a las 21:13

2 respuestas 2

1

Sí, pero no realizando el cambio de esa manera. El pantallazo blanco sucede porque el cambio de imagen obliga a recargar la imagen, lo cual dura poco pero suficiente para advertir el efecto de parpadeo.

La solución puede ser crear un nodo img por javascript y asignarle la imagen. Posteriormente podemos saber cuándo se ha cargado la imagen mediante el evento load de la imagen. Podemos entonces cargar la imagen como fondo en #container

Aquí está el fiddle con el resultado: https://jsfiddle.net/qynvg44b/18/

Código javascript modificado:

$(window).ready(function () {
    var v = 0;

    $(window).on("scroll", function () {
        var scrollTop = $(this).scrollTop();

        if (scrollTop > 100 && scrollTop < 200) {


            if ( $('#container').attr('data-img') != 'http://i.imgur.com/Hhmt8.gif') {
                ++v;
                $('#container').attr('data-img', 'http://i.imgur.com/Hhmt8.gif');

                var img = document.createElement('img');
                img.src = "https://i.imgur.com/Hhmt8.gif?v=" + v;

                $(img).load(function() {
                    $('#container').css('background-image', 'url(' + img.src + ')');
                });
            }

        } else if(scrollTop >= 200){

            if ( $('#container').attr('data-img') != 'http://i.imgur.com/TUAwA.gif') {
                ++v;
                $('#container').attr('data-img', 'http://i.imgur.com/TUAwA.gif');

                var img = document.createElement('img');
                img.src = "https://i.imgur.com/TUAwA.gif?v=" + v;

                $(img).load(function() {
                    $('#container').css('background-image', 'url(' + img.src + ')');
                });
            } 


        } else {
            $('.imageHolder').css('background', 'blue');
        }

    });

});
3
  • No reacciona de buena manera, no se si te sucede a ti. Pero hago scroll y se queda la imagen congelada y al rato se reproduce varias veces. La idea es que como en el fiddle, puedas regresarte y se active de nuevo el gif pero sin el pantallazo.
    – Caro
    Commented el 27 jul. 2016 a las 21:18
  • El resultado del Fiddle para mí, con Google Chrome, lo puedes ver en este gif: im2.ezgif.com/tmp/ezgif-3621077673.gif ¿No es así como quieres que funcione? Con el scroll cambia el vídeo, no se reinicia incluso haciendo scroll dentro de cada límite. Cuando pasas el límite de los 200px, cambia al otro gif sin pantallazo blanco y de la misma manera. Siempre se reproducen desde el principio. Commented el 27 jul. 2016 a las 23:13
  • pero la idea es que se reinicie, pero sin el pantallazo. El fiddle que yo di tiene el efecto deseado en cuanto al reinicio de los gifs, pero quisiera saber si eso se puede dar SIN el pantallazo
    – Caro
    Commented el 28 jul. 2016 a las 12:39
0

Si quitas el ?v='+v+' del valor que asignas a Background-image ya no hace al pantallazo. No sabría decirte para que sirve enviar ese atributo al imgur, pero parece que obliga a cargar la imagen cada vez y por eso lagea cuando cambia.

1
  • Sí, pero si le quito eso la imagen se cargara en el ultimo gif del frame sin hacer la animación
    – Caro
    Commented el 28 jul. 2016 a las 13:46

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.