Question

我有一个旋转木马，我需要根据浏览器的当前宽度重新定位旋转木马幻灯片。我需要遵循的规则是：

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

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

如果有超时，这将首先清除超时。然后它会将调整大小代码设置为在10ms时间内执行。这应该给浏览器足够的时间来屏住呼吸，并停止触发多个调整大小事件 - 它基本上是 debounce 函数。

更改背景位置窗口调整大小会导致图像闪烁

1 个答案: