jQuery 滚动动画随着背景图片变慢

Question

我的页面采用了视差设计，背景中有几张相当高分辨率的照片占据了页面的大部分。当页面加载时，着陆页是一个大的、高分辨率的背景图像，带有 table 的小内容（'about'、'music'、'contact'）。当您单击其中一个时，它应该滚动到页面的适当部分，并且确实如此。这是其中一个元素的 jQuery 代码：

var $root = $('html, body');
$("h3[class='About']").click(function() {
        $root.animate({
            scrollTop: $("div[class*='About']").offset().top
        }, 2000, 'swing');
    });

滚动效果很好，但它明显滞后并且有点不稳定。当我从网站上删除图像时，它执行得非常顺利。我想知道我能做些什么来规避这个问题。我试过压缩图像，但几乎没有解决问题。

Answer 1

是的，我想您已经发现了问题所在：浏览器渲染高分辨率图像是一项艰巨的工作，您对此无能为力。你做的一切都正确。

使用 jQuery >3.0 会有一点好处，因为它使用 requestAnimationFrame 而不是 setTimeout。

进行动画处理

将图像调整为较低的分辨率会有所帮助。通过降低 jpeg 质量或其他方式压缩图像，因为图像在浏览器呈现之前未压缩。

jQuery 滚动动画随着背景图片变慢

jQuery scroll animation slows with background images

javascript

jquery

scroll

jquery-animate