5

以下は、時間のサイクルで持っているすべてのイメージオブジェクトの背景イメージを変更してスライダーを作成するために使用しているスクリプトの一部です。

   #Sliderimg - height is 500px,

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

画像を変更するたびにちらつき効果が発生するため、これで問題が発生した可能性があります。私の問題は、新しい画像がロードされようとしているのではなく、古い画像のちらつき(画面の下部に点滅)です。交換しようとしているもの。

4

4 に答える 4

1

背景画像を変更するたびに、ブラウザが背景を表示する前にダウンロードする必要があるため、ちらつきが見られます。画像が大きすぎない場合 (たとえば 5kb 以上)、画像が表示されない要素に画像を適用して、ブラウザーにキャッシュしてみてください。

また、50px は有効な z-index ではありません。そのプロパティには整数のみが必要です。

于 2012-06-13T17:29:56.183 に答える
0

ブラウザは背景全体を強制的に再描画します。

これを行う方法は、背景を白に設定してから、新しい背景を再描画することです。

これと戦うには jquery.animate() を使用してください。

于 2012-06-13T17:32:04.923 に答える
0

先日も同じ問題がありました。奇妙なことに、FF では問題ないように見えましたが、IE、Chrome、および場合によっては Safari ではちらつきました。解決策は、css スプライト シートを使用することです。両方の背景が隣り合っているイメージを作成します。背景シートの一部のみを表示します。背景の余白を調整して切り替えます。addClass と removeClass を使用してマージン調整を処理できます。以下はコードです。フィドルについてはこちらを参照してください：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');
});
于 2013-12-20T23:29:53.960 に答える
0

z-index 属性から「px」を削除してみてはいかがでしょうか。小数値を取ります。

于 2012-06-13T17:29:34.770 に答える