我目前正在开发 web page在标题和网站的其他三个部分上具有滚动视差效果 (Stellar.js):但是,滚动它们会导致延迟,尤其是在页面顶部。
我已经尝试过使用压缩来减小背景图像的大小,但是并没有太大的区别;移除模糊效果也没有解决问题(它确实减少了延迟,但仍然不够平滑)。
该网站在 Firefox (W10) 上运行良好,几乎没有掉帧,但在 Chrome(Windows 和 OS X)和 Safari 上有相当大的延迟。
有几个 JS 滚动触发的脚本在运行,但我不知道这些是否可能是原因。有什么建议吗?
最佳答案
您要做的是限制滚动事件。去抖动事件意味着一个事件在一定时间后才能再次触发。节流事件意味着事件在每个时间段内只能触发这么多。
这是限制事件的函数(来源: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 ));
关于javascript - 滚动时视差滞后的网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35106609/