Geek asks and answers

Using a background image using jQuery causing a flickering effect

Follwing is the part of the script that I use to create a slider by changing the background image for each image object that I have for a time loop.

       #Sliderimg - height is 500px,

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

What could go wrong with this, as I get a flickering effect every time I change the image. My problem is not with the new image being uploaded, its flickering (blinking at the bottom of the screen) for the old image, which needs to be replaced.

+5
source share
4 answers

, , , , . ( , , 5kb), , , .

, 50px z-index, .

+1

, "px" z-index? .

0

.

, .

jquery.animate(), .

0

I had the same problem the other day. Oddly enough, in FF everything seemed to be in order, but it flickers 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 show only part of the background. you switch it by adjusting the border in the background. You can handle field adjustments with addClass and removeClass. Below is the code, see the fiddle here: 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');
});
0
source

More articles:


All Articles