javascript - 无法诊断 : Background position different on page open

Question

我在我的网页上使用 parallax.js。

http://www.edizarca.com/karpaz/ (页面现已更新，视差被移除，直到找到可行的解决方案)

但是打开页面一直刷新。有时背景图像开始怪异(关闭位置)。我在 chrome 和 firefox 中都进行了测试，但我不明白为什么会这样。

你有什么想法吗？

谢谢

Answer 1

以下是我通过检查发现的。

parallax.js 存储应用它的元素的初始顶部偏移量。此值存储在名为 firstTop 的变量中. background-position将根据 firstTop 的值放置和当前滚动位置，这样 background-position如果 firstTop 将只能达到 0是 0 [例如如果 firstTop是 96 background-position不会小于 67]。

注意:更多关于 96 之后。

没错，firstTop并不总是 0，有时我设法达到非零值。我怀疑它与浏览器缓存有关。

那么，firstTop 的值从哪里来？来自？这是代码:

//get the starting position of each element to have parallax applied to it      
$this.each(function(){
    firstTop = $this.offset().top;
});

其中 offset 是 JQuery 中定义的函数。在查询元素的特定情况下，它将返回到 getBoundingClientRect。所以，如果问题出在哪里，那将是浏览器的错误...

所以，从另一个方向看...我得到的值是 96，它只是 [有时] 在缓存清理之后。在断点处，除了灰色背景和滚动条外，还没有呈现任何内容...但如果我没有在断点处清除缓存，则页面布局是可见的。

96左右，是id为“header”的div的高度。当我到达断点时，高度会有所不同，这取决于我是否清理了缓存。如果我清除了缓存，它是 [有时] 96，如果没有它是 150(但现在 ID 为“wrapper”的 div 有 position: relative 并且它的顶部偏移量是 0)。

那么....我们如何解释这种行为？

文件style.css当然。如果缓存失效浏览器必须重新下载它，同时它会去执行javascript。如果它在应用 css 之前读取 id 为“wrapped”的 div 的位置，则偏移量是错误的。当然，当从缓存中加载样式时，它会立即应用，不会让 javascript 出现错误行为。

---

注意:我还得到了 233 的 firstTop 和 id 为“header”的 div 的高度 195.875。

---

解决方案？我不知道。 我怀疑 parallax.js 可能允许通过某种方式来设置固定的初始偏移量。 (代码中没有办法设置初始偏移量)。

您可以寻找一个允许检查样式的库。 (注意:使用 javascript 读取样式不起作用，因为它们可能已加载但未应用)。

如果我是你，我会修改 parallax.js(或尝试其他版本) 。无需修改 parallax.js。

---

编辑 1:

你应该尝试:

• 使用 defer 运行您的代码属性。
• 尝试使用 setTimeout

这个想法是让浏览器“稍后”执行视差的初始化，这样它就会应用 css，但不会“太迟”以至于用户开始与页面交互。

编辑 2:

• 将样式放在任何 javascript 之前(或将 javascript 放在文档末尾)。
• 使用 $(document).load而不是 $(document).ready运行 parallax.js