How can I prevent images flickering using setInterval() in Jquery?

Question

Jquery:

var count = 3;

setInterval(function() {
    if (count == 12) {
        count = 3;
    }

    count++;
    $('.desktop').css({'background-image': 'url(images/index_main_bg'+count+'.jpg)'});
}, 3000);

CSS:

.desktop {
    background: url(images/index_main_bg4.jpg) center no-repeat;
    background-size: cover;
    z-index: 9;
    transition: background 1.1s linear;
}

Basically, I just want these background images to have a smooth transition but it has a delayed flicker at seemingly random times. Any help is appreciated!

Thanks

you could try preloading the images, so the moment you define them as backgrounds they are already in the browsers cache, ready to draw. check out this answer https://stackoverflow.com/questions/476679/preloading-images-with-jquery — luckyape, Dec 24 '17 at 04:44
Use a big image containing all the images and then change the background positions(sprite images), or start animation after all the images are loaded — Ananthakrishnan Baji, Dec 24 '17 at 05:49

score 0 · Answer 1 · answered Dec 24 '17 at 06:24

0

Create multiple '.desktop' elements and assign different background for all. You can just show and hide (or any animation of your requirement) particular .desktop element. You wont see flickering with this solution.

answered Dec 24 '17 at 06:24

Pradeep

140
9

Thanks a lot. I actually have a lot of content in the div with class ".desktop". But this lead me to a similar approach: I created multiple classes such as .desktop2, .desktop3, etc. with these different background images. I then used addClass() and removeClass(). – J. Doe Dec 26 '17 at 18:02
Cool. You can optimize the code by keeping one common class. Like desktopGeneralClass and remove active class from one desktopGeneralClass and add active to next desktopGeneralClass. by doing this way, you do not have to write javascript code in case if you had more images to carousel. – Pradeep Dec 26 '17 at 18:16

score 0 · Answer 2 · answered Dec 26 '17 at 18:10

This is what I ended up doing:

Jquery:

var count=3;

setInterval(function() {
    if(count==11){
        $('#desktop').removeClass('desktop'+(count+1));
        count=3;
        $('#desktop').addClass('desktop'+(count+1));
    } else {
        count++;
        $('#desktop').removeClass('desktop'+count);
        $('#desktop').addClass('desktop'+(count+1));
    }
}, 3000);

CSS (I created multiple classes which are added and removed):

.desktop4 {
  background-image: url(images/index_main_bg4.jpg);
}

.desktop5 {
  background-image: url(images/index_main_bg5.jpg);
}

.desktop6 {
  background-image: url(images/index_main_bg6.jpg);
}

HTML:

<div id="desktop" class="desktop4">
   SOME CONTENT
<div>

This avoided the flickering instead of changing the style of a particular class as before.

score -1 · Answer 3 · answered Dec 24 '17 at 06:04

-1

Use a big image containing all the images and then change the background positions(sprite images)

var count = 1,varx_pos = 0;
setInterval(function(){
 varx_pos += 180;
 if(count == 3){varx_pos = 0;count=0;}
  $('.desktop').css({'background-position-x':varx_pos+'px'});
 count++;
},150);

.desktop{
background-image:url('http://spritely.net/images/bird_180x180.png');
width:180px;
height:120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desktop"></div>

answered Dec 24 '17 at 06:04

Ananthakrishnan Baji

1,254
1
9
21

Thanks for the feedback. This seems like a more compact approach than using addClass() and removeClass() on a bunch of classes with different background images...which is what I ended up doing. I was not sure how to create the "big image" containing all images as you mentioned? – J. Doe Dec 26 '17 at 18:05

How can I prevent images flickering using setInterval() in Jquery?

3 Answers3