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

Question

我的页面采用视差设计，背景中有几张相当高分辨率的照片占据了页面的大部分。当页面加载时，登陆页面是一个大的、高分辨率的背景图像和一个小的目录（'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 质量或其他方式来压缩图像，因为图像在浏览器呈现之前未压缩。