无法诊断:页面打开时背景位置不同

Can't diagnose: Background position different on page open

本文关键字：背景 位置 诊断      更新时间：2023-09-26

我在我的网页上使用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(但现在div id为"wrapper"有position: relative，它的顶部偏移量是0)。

所以…我们如何解释这种行为?

当然是文件style.css。如果缓存无效，浏览器必须再次下载它，同时它将去执行javascript。如果它在css应用之前读取id为"wrapped"的div的位置，那么偏移量是错误的。当然，当样式从缓存中加载时，它会立即应用，没有机会让javascript出错。

注意:我也得到了一个firstTop 233和div的高度与id "header" 195.875。

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

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

如果我是你，我会修改parallax.js(或尝试另一个版本)。不需要修改parallax.js.

编辑1 :

你应该试着:

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

这个想法是让浏览器执行视差的初始化"稍晚"，这样它将应用CSS，但不会"太晚"，用户将开始与页面交互。

编辑2 :

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