我在我的网页上使用 parallax.js。
http://www.edizarca.com/karpaz/ (页面现已更新,视差被移除,直到找到可行的解决方案)
但是打开页面一直刷新。有时背景图像开始怪异(关闭位置)。我在 chrome 和 firefox 中都进行了测试,但我不明白为什么会这样。
你有什么想法吗?
谢谢
最佳答案
以下是我通过检查发现的。
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
关于javascript - 无法诊断 : Background position different on page open,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15639895/