Currently, I am facing an issue with the banner area on my website. The background of the banner is set to change every 10 seconds using JavaScript. However, there seems to be a flickering effect that occurs for a brief moment when the background-image is changed via JavaScript in Firefox.
This transition works smoothly on Chrome, Opera, and Safari, but not on Firefox (among the browsers tested).
Is there any solution or workaround to prevent this flickering issue from happening?
Here's the code snippet:
function preloadImages(array) {
if (!preloadImages.list) {
preloadImages.list = [];
}
var list = preloadImages.list;
for (var i = 0; i < array.length; i++) {
var img = new Image();
img.onload = function() {
var index = list.indexOf(this);
if (index !== -1) {
list.splice(index, 1);
}
}
list.push(img);
img.src = array[i];
}
}
var slide_images = [
"https://picsum.photos/id/11/2500/1667",
"https://picsum.photos/id/15/2500/1667",
"https://picsum.photos/id/17/2500/1667",
"https://picsum.photos/id/19/2500/1667",
];
var slide_count = 0;
$(document).ready(function() {
preloadImages(["https://picsum.photos/id/15/2500/1667"]);
setInterval(function() {
slide_count = ++slide_count % slide_images.length;
if (jQuery.inArray(slide_images[slide_count + 1], slide_images) !== -1) {
preloadImages([slide_images[slide_count + 1]]);
}
$('.banner').css('background-image', 'url(\'' + slide_images[slide_count] + '\')');
}, 5000); //lowered from 10
});.banner {
min-height: 1000px;
color: #fff;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.bg {
background-image: url('https://picsum.photos/id/11/2500/1667');
transition: 2s;
-webkit-animation: 4s infinite fade;
-moz-animation: 4s infinite fade;
-o-animation: 4s infinite fade;
animation: 4s infinite fade;
}<div class="banner bg">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Your help on resolving this issue would be greatly appreciated. Thank you.