视差背景性能和行为

Question

到目前为止，我已经创建了一个水平滚动的站点，该站点对元素背景图像具有视差效果（将其拉伸以适合视口的大小）。 我已经使用Stellar.js库实现了效果。

$.stellar({
    horizontalScrolling: true,
    verticalScrolling: false,
    horizontalOffset: $(window).width()
});

但是，我面临两个问题。

1. 图像趋于在元素完全消失之前“用完”。 在下面显示白色背景。 这种效果的严重程度取决于视口的大小和形状，因此我想尝试找出涉及图像大小，纵横比或定义的滚动比例的数学方法是不值得的。 是否有一种方法可以使Stellar中的滚动比例“自动”，从而使背景永远不会“用完”（或者有替代的视差库可以做到这一点）？
2. 无论使用何种浏览器和机器，效果的表现都很糟糕。 消除background-size: cover似乎可以改善一些东西，但是还不够“足够”； 使用img元素会改善背景图片的性能吗？ 这是一个巨大的变化，而且做起来很麻烦，但是如果它可以解决滚动缓慢的问题，那将是值得的。

提前致谢！

Answer 1

正如@Shivam建议的那样，请改用skrollr.js。 我有这个完全相同的问题。 请参阅： 填充容器的视差背景图像

Skrollr.js将开始偏移设置为0，因此即使将背景设置为封面，您也不会在图像下方获得该空间。

这是我遵循的教程，可以在我的网站上使用它： http : //ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/ 。 说明中唯一缺少的是，在步骤1中，您还需要包括示例文件随附的imagesloaded.js文件。 希望有帮助！ 我花了几天的时间来寻找解决方案！