Ok, here is this fiddle taken from this question . As you can see, when the change is made between the two gifs, there is a kind of white flash.
Is there any way to eliminate this?
Ok, here is this fiddle taken from this question . As you can see, when the change is made between the two gifs, there is a kind of white flash.
Is there any way to eliminate this?
Yes, but not making the change that way. The white screen happens because the change of image forces to reload the image, which lasts little but enough to notice the flickering effect.
The solution can be to create a node img by javascript and assign it the image. Later we can know when the image has been loaded by the event load of the image. We can then load the image as a background in #container
Here is the fiddle with the result: link
Modified javascript code:
$(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');
}
});
});
If you remove the ?v='+v+' of the value you assign to Background-image, it does not do the screenshot anymore.
I could not tell you what it's worth to send that attribute to the imgur, but it seems that it forces the image to load every time and that's why it changes when it changes.