0

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

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

但是打开页面并保持刷新。有时背景图像开始怪异（关闭位置）。我已经在 chrome 和 firefox 中进行了测试，但我无法弄清楚它为什么这样做。

你有什么主意吗？

谢谢

4

1 回答 1

0

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

parallax.js 存储应用它的元素的初始顶部偏移量。该值存储在一个名为 的变量中firstTop。将background-position根据 的值firstTop和当前滚动位置放置，这样background-position只有在为 0 时才能达到firstTop0 [例如，如果firstTop是 96background-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”为 195.875 的 div 的高度。

解决方案？我不知道。我怀疑 parallax.js 可能允许以某种方式设置固定的初始偏移量。（没有办法按照代码设置初始偏移量）。

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

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

编辑 1：

您应该尝试：

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

编辑 2：

  • 将样式放在任何 javascript 之前（或将 javascript 放在文档末尾）。
  • 使用$(document).load而不是$(document).ready运行 parallax.js
于 2013-03-26T16:18:16.183 回答