jQuery滚动动画与背景图像减慢

Question

我的页面采用了视差设计，背景中有几张漂亮的高分辨率照片占据了大部分页面。当页面加载时，着陆页是一个大的高分辨率背景图像，其中包含一个小的目录（＆＃39;关于＆＃39;，＆＃39;音乐＆＃39;＆＃39;联系＆＃39; ）。当您单击一个时，它应该滚动到页面的相应部分，它会。这是一个这样的元素的jQuery代码：

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

滚动效果很好，但它明显滞后，有点不稳定。当我从网站上删除图像时，它执行得非常顺利。我想知道如何绕过这个问题。我曾尝试压缩图像，但它几乎没有解决问题。

Answer 1

是的，我认为您已经发现了问题：高分辨率图像对于浏览器来说很难呈现，您无法提供帮助。你正确地做了一切。

使用jQuery＆gt; 3.0会有一个小小的好处，因为它使用requestAnimationFrame代替setTimeout进行动画处理。

调整图像大小以降低分辨率有助于。通过降低jpeg质量或其他任何因素来压缩图像，因为图像在浏览器呈现之前是未压缩的。