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?
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?
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');
}
});
});
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.
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 comentadov++
y poniendo el valor a 1 y veras a que me refiero. jsfiddle.net/qynvg44b/19