Changing the background-Image using Jquery causing a flickering kind of effect

Question

Following is the portion of the script which I am using to create a slider by changing the background image for every imageobject I have for a cycle of time.

   #Sliderimg - height is 500px,

   $("#Sliderimg").css({
        "background-image": "url(../Images/" +SliderImageObj.image + ")",
        "display": "block",
        "z-index": "50px"
    });

What could have gone wrong with this as I'm getting the flickering effect every time I change the image, My problem is not with the new image about to load, its flickering(flashing on to the bottom of the screen) for the old image which is about to be replaced.

Why are you setting the display and z-index attributes every time you want to update the background image? Best toove the display and z-index attributes to your CSS. Also z-index:50px is invalid. z-index takes an integer value. — Lowkase, Jun 13 '12 at 17:27
Are you pre-loading your images? If not, the flicker could be whilst the browser is downloading. — chrisfrancis27, Jun 13 '12 at 17:28
You might find the flash is caused whilst the new image loads. If this is the case, consider [pre-loading the images.](http://stackoverflow.com/questions/3646036/javascript-preloading-images) — Matt, Jun 13 '12 at 17:29
@Grigor I couldn't capture the screenshot as it is happening in a flash of seconds — user824910, Jun 13 '12 at 17:34
My problem is not with the new image about to load, its flickering for the old image which is about to be replaced — user824910, Jun 13 '12 at 17:40
@Grigor Its like the background image to be replaced is flashing on the bottom of the screen before the background is set with the new image — user824910, Jun 13 '12 at 18:09

score 1 · Answer 1 · answered Jun 13 '12 at 17:29

1

You see a flicker because every time you change the background image, your browser has to download it before it can show the background. If the images aren't too big (more than say, 5kb) you can try caching them in the browser by applying them to elements where they won't show up.

Also, 50px isn't a valid z-index, that property requires integers only.

answered Jun 13 '12 at 17:29

davethegr8

11,323
5
36
61

Not true, a proper browser will cache the images whilst cycling and remember those, battling the download delay. the flicker comes from the way browsers redraw items. – Tschallacka Jun 13 '12 at 17:34
My problem is not with the new image about to load, its flickering for the old image which is about to be replaced – user824910 Jun 13 '12 at 17:39
It might help to have a more specific example, since it's slightly difficult to tell exactly what is going on. – davethegr8 Jun 13 '12 at 21:56

score 0 · Answer 2 · answered Jun 13 '12 at 17:29

0

Maybe delete "px" from your z-index atribute? It take decimal values.

answered Jun 13 '12 at 17:29

Mateusz Rogulski

7,357
7
44
62

@ChrisFrancis Thanks :) but nobody appreciated that :P – Mateusz Rogulski Jun 13 '12 at 17:32
I agree with you guys, I have corrected that, but i still have the same problem – user824910 Jun 13 '12 at 17:37

score 0 · Answer 3 · answered Jun 13 '12 at 17:32

0

the browser is forced to redraw the entire background.

how this is done is by setting background to white and then redrawing the new background.

use jquery.animate() to battle this.

answered Jun 13 '12 at 17:32

Tschallacka

27,901
14
88
133

score 0 · Answer 4 · answered Dec 20 '13 at 23:29

I had the same issue the other day. Oddly enough, it seemed to be OK in FF, but would flicker in IE, Chrome, and sometimes Safari. The solution is to use a css sprite sheet. You create an image that has both backgrounds next to each other. You only show a portion of the background sheet. you toggle it by adjusting the margin on the background. You can handle the margin adjustments using addClass and removeClass. Below is code, see here for a fiddle: http://jsfiddle.net/fMhMY/

CSS

.navButton span{
width:32px;
height:32px;
display:block;
}

a.leftButton span, a#leftButton span{
background-image:url(Prev.png);
background-position:-64px 0px;
}

/*nav button sprites */

/*sprite order is pushed, hover, natural */

a.leftButton.navOver span, a.rightButton.navOver span{
background-position:-32px 0px;
}

a.leftButton.navPressed span, a.rightButton.navPressed span{
background-position:0px 0px;
}

HTML

<div style='display:inline-block'>
    <a href="javascript:void(0);" class="leftButton navButton" id='lefty'>
        <span></span>
    </a>
</div>

jQuery

$('.leftButton').mousedown(function() {

        $('.leftButton').addClass('navPressed');
        console.log('mousedown');

});
$('.leftButton').mouseup(function() {
        $('.leftButton').removeClass('navPressed');
        console.log('mouseup');
});

$('.leftButton').hover(function() {
        $('.leftButton').addClass('navOver');
        console.log('hover');
});


$('.leftButton').mouseout(function() {
        $('.leftButton').removeClass('navPressed').removeClass('navOver');
        console.log('mouseout');
});

Changing the background-Image using Jquery causing a flickering kind of effect

4 Answers4