CODEWITHSUNDEEP
javascriptjquerycss
user824910
user824910

Reputation: 1117

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

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.

Upvotes: 5

Views: 1514

Answers (4)

chiliNUT
chiliNUT

Reputation: 19573

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');
});

Upvotes: 0

Tschallacka
Tschallacka

Reputation: 28722

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.

Upvotes: 0

davethegr8
davethegr8

Reputation: 11595

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.

Upvotes: 1

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7445

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

Upvotes: 0

Related Questions