javascript - 内联 JavaScript 似乎是随机加载的，如果有的话

Question

首先，我想说，如果这是一个简单的问题，我很抱歉。我对 HTML/CSS 领域相当陌生，甚至还没有接触过 Javascript。

这是我的问题。我有一个要为我叔叔建立的网站，你可以看到 here . (它仍处于 pre-alpha 阶段，因此链接不起作用)。它作为本地文件工作正常，但一旦我托管它，我的“粘性”标题就会很快开始粘附，如果有的话。重新加载页面大约是 10 次中的 1 次。

我可能已经或可能没有找出问题的原因:我的占位符。我的粘性代码本身在大多数情况下都可以正常工作，除了一件事:当粘性条停靠时，它会固定并且文本会向上跳 90 多个像素。为了解决这个问题，我在下面的代码中添加了 6 和 7 行:

var sticky = document.querySelector('.sticky');
var origOffsetY = sticky.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
  sticky.classList.remove('fixed');               
window.scrollY >= origOffsetY ? jQuery('.content').css("paddingTop", "88.8125px"):
  jQuery('.content').css("paddingTop", "0px");
}
document.addEventListener('scroll', onScroll);

它基本上会在其中放置一个占位符以停止该跳转。它工作正常，除了现在它破坏了我的代码。我做了一些实验，发现占位符似乎是随机加载的，而标题就很奇怪。这是我能做的最好的。

似乎是占位符代码破坏了它，如without the code它似乎工作正常，也许在重新加载几次之后。但是，我完全被难住了。有没有人知道如何解决它？

(在 64 位和 32 位 Chrome 以及 Android 版 Chrome 中进行了测试，尽管在另一个层面上存在问题。作为本地页面可以正常工作，但在托管时却不行。)

Answer 1

似乎这些代码执行得太早了，图像还没有加载，你可以使用 chrome dev 工具添加一个暂停来打破 var origOffsetY = sticky.offsetTop;。

然后你可以看到2种情况:22或者642

您可以进一步检查当满足 22 条件时，应该是横幅的图像没有完成，如果您使用 document.querySelector('.splash img') 获取它并检查它的高度，你会看到 0。在 642 情况下，您将得到 500。

不同之处可能是图像有时来自缓存，有时它从互联网加载，因此它可能会或可能不会决定脚本执行时的高度。

所以我们必须确保 .splash 中的 image 已经加载:

<script>

// Wrap the logic to a function for call.
var stickFunction = function() {
    var sticky = document.querySelector('.sticky');
    var origOffsetY = sticky.offsetTop;

    function onScroll(e) {
      window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
                                      sticky.classList.remove('fixed');

      window.scrollY >= origOffsetY ? jQuery('.content').css("paddingTop", "88.8125px"):
                                      jQuery('.content').css("paddingTop", "0px");
    }

    document.addEventListener('scroll', onScroll);
}

// Get the image element
var splashImage = document.querySelector('.splash img');

// Check if image is complete or not.
if (splashImage.complete) { // If completed, do the logic.
    stickFunction();
} else { // If not, tell the image to call the function for you when it is loaded.
    splashImage.onload = stickFunction;
}


</script>