Question

我的网页上有一个带有图片的粘性标题：

/* Simplified CSS: */
header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 150px;
    transition: height .5s;
}

header > img {
    display: block;
    margin: 0px auto;
    height: 100%;
    width: auto;
}

当用户向下滚动时，标题会变得不那么高：

header.floating {
    height: 100px;
}

由于它的高度为100％，因此可以对图像进行缩放。在过渡期间，图像变得像素化;我想，删除了反别名以提高浏览器的性能。

我的网页上还有一个欢迎屏幕，里面有不同的图片。显示的图像每5秒更改一次。有一个进度条显示计时器的进度。

/* Simplified CSS: */
section#welcome {
    width: 100%;
    height: 100%;
}

section#welcome div#progress {
    width: 0.1%;
    height: 10px;
    background-color: green;
}

/* Simplified JavaScript & jQuery: */
setInterval(function() {
    changeImage();
    $("div#progress").animate({
        width: '100%'
    }, 5000);
}, 5000);

然而;当转换完成时，图像保持像素化 - 它的反别名似乎被jQuery的animate（）阻止。当我禁用jQuery时，图像会在大约一秒后重新呈现。

我尝试过的事情

我尝试在计时器之间添加额外的间隙，以允许浏览器重新渲染图像。这没用。

我尝试用CSS动画替换jQuery。这也不起作用。

从哪里开始？如何维护进度条，但允许浏览器（或强制它）重新渲染标题中的图像？

Javascript和CSS动画渲染阻塞

0 个答案: