我使用此代码为我创建的网站提供视差效果，在safari和firefox（mac）中效果很好。但是在chrome（mac）中它会变得迟钝，就像我在iPad和iPhone 6上试用它一样。
使用Javascript：
var ypos,image;
function parallax() {
image = document.getElementById('bgImage');
ypos = window.pageYOffset;
image.style.top = ypos * .4+ 'px';
}
window.addEventListener('scroll', parallax),false;
HTML：
<img class="img-responsive" id="bgImage" src="images/bgtopg.jpg">
</div>
<div id="box1" class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet.....</p>
</div>
（img-responsive - 来自bootstrap）
的CSS：
#bgImage {
position: relative;
z-index: -1
}
任何想法导致滞后效应的原因是什么？
答案 0 :(得分：1)
＆＃39; Laggy＆＃39; javascript事件的行为是一个常见问题。基本上你遇到的是重载你的事件堆栈。它堆积得如此之高，以至于造成波动效应。
解决这个问题的方法有两个。您可以选择硬件加速或去抖动的路径。 Debouncing应该是您的第一个解决方案，当您确认自己并不是简单地重载脚本时，应该使用硬件加速。
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
document.addEventListener("DOMContentLoaded", function(event) {
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
var myEfficientFn = debounce(function() {
console.log("HEY STOP MOVING ME AROUND!");
}, 25);
window.addEventListener("mousemove", myEfficientFn),false;
});Move your mouse around a whole lot and look at your console.
答案 1 :(得分：0)
您可以尝试使用translateY进行视差动画效果，而不是操纵图像的顶部样式。 Paul Irish的This is an excellent post描述了为什么你应该做翻译而不是上/左/右/下。
所以而不是：
image.style.top = ypos * .4+ 'px';
你可以这样做：
image.style.webkitTransform = 'translateY(' + ypos * .4 + 'px)';
image.style.transform = 'translateY(' + ypos * .4 + 'px)';