1

カルーセルがあり、ブラウザーの現在の幅に基づいてカルーセル スライドの位置を変更する必要があります。私が従う必要があるルールは次のとおりです。

browserWidth > 1200: do not reposition slide
browserWidth > 960 && browserWidth < 1200: move slide background X position based 
                                           on the formula (25/48*browserWidth)-625
browserWidth < 960: reposition background X position to -125px

これを行うためにいくつかの JavaScript を作成しましたが、ブラウザーのサイズを変更するたびに、画像が頻繁に点滅し始めます。背景画像は非常に高解像度であるため、コンピューターが背景画像を再レンダリングしようとして問題を抱えていると思います。この点滅の問題を解決する方法はありますか?

$(window).resize(function() {
    var winW = $(window).width();
    if (winW > 960 && winW < 1200) {
        $('#' + carouselID).css('left', '600px' ); 
        var leftValue = ((25/48) * winW - 625) + 'px';
        var backgroundAtr = 'url(http://www.placehold.it/1200x800) ' + leftValue + ' top no-repeat';
        $('#' + carouselID + ' .slides .slide').css('background', backgroundAtr );
    } else if (winW <= 960) {
        $('#' + carouselID).css('left', '600px' ); 
        var leftValue = '-125px';
        var backgroundAtr = 'url(http://www.placehold.it/1200x800) ' + leftValue + ' top no-repeat';
        $('#' + carouselID + ' .slides .slide').css('background', backgroundAtr );
    } else if (winW >= 1200) {
        $('#' + carouselID).css('left', '50%' );
        var leftValue = 'left';
        var backgroundAtr = 'url(http://www.placehold.it/1200x800) ' + leftValue + ' top no-repeat';
        $('#' + carouselID + ' .slides .slide').css('background', backgroundAtr );
    }
});
4

1 に答える 1

1

内にサイズ変更コードを配置することをお勧めしtimeoutます。一部のブラウザーは、複数のサイズ変更イベントを発生させることを好むため、点滅が発生する原因となっている可能性があります。次のようなことを試してください：

var timeout;
$(window).resize(function() {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        var winW = $(window).width();
        if (winW > 960 && winW < 1200) {
            $('#' + carouselID).css('left', '600px' );
            var leftValue = ((25/48) * winW - 625) + 'px';
            var backgroundAtr = 'url(http://www.placehold.it/1200x800) ' + leftValue + ' top no-repeat';
            $('#' + carouselID + ' .slides .slide').css('background', backgroundAtr );
        } else if (winW <= 960) {
            $('#' + carouselID).css('left', '600px' );
            var leftValue = '-125px';
            var backgroundAtr = 'url(http://www.placehold.it/1200x800) ' + leftValue + ' top no-repeat';
            $('#' + carouselID + ' .slides .slide').css('background', backgroundAtr );
        } else if (winW >= 1200) {
            $('#' + carouselID).css('left', '50%' );
            var leftValue = 'left';
            var backgroundAtr = 'url(http://www.placehold.it/1200x800) ' + leftValue + ' top no-repeat';
            $('#' + carouselID + ' .slides .slide').css('background', backgroundAtr );
        }
    }, 10);
});

タイムアウトがある場合、これは最初にタイムアウトをクリアします。次に、サイズ変更コードを 10 ミリ秒で実行するように設定します。これにより、ブラウザが息を止め、複数のサイズ変更イベントの発生を停止するのに十分な時間が与えられます。これは基本的にデバウンス機能です。

于 2012-10-03T23:30:04.453 に答える