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 回答