滚动时视差滞后的网页

Question

我目前正在 header 和网站的其他三个部分开发具有滚动视差效果 (Stellar.js) 的 web page：但是，滚动它们会导致延迟，特别是在页面顶部。

我已经尝试过使用压缩来减小背景图像的大小，但效果不大；移除模糊效果也没有解决问题（它确实减少了延迟，但仍然不够平滑）。

该网站在 Firefox (W10) 上运行良好，几乎没有掉帧，但在 Chrome（Windows 和 OS X）和 Safari 上有相当大的延迟.

有几个 JS scroll-triggered 脚本运行，但我不知道这些是否可能是原因。有什么建议吗？

Answer 1

您要做的是限制滚动事件。去抖动事件意味着一个事件在一定时间后才能再次触发。节流事件意味着事件在每个时间段内只能触发这么多。

这是限制事件的函数（来源：http://sampsonblog.com/749/simple-throttle-function）

// Create the listener function
function throttle (callback, limit) {
    var wait = false;                 // Initially, we're not waiting
    return function () {              // We return a throttled function
        if (!wait) {                  // If we're not waiting
            callback.call();          // Execute users function
            wait = true;              // Prevent future invocations
            setTimeout(function () {  // After a period of time
                wait = false;         // And allow future invocations
            }, limit);
        }
    }
 }

要使用它，只需执行以下操作：

function callback () {
    console.count("Throttled");
}

window.addEventListener("scroll", throttle( callback, 200 ));

滚动时视差滞后的网页

Web page with parallax lags on scroll

html

javascript

css

jquery

parallax