Inline JavaScript, кажется, загружается случайно, если вообще

Question

Прежде всего, я хотел бы сказать, что мне жаль, если это простой вопрос. Я довольно новичок в HTML/CSS-сцене и еще не добрался до Javascript.

Вот моя проблема. У меня есть веб-сайт, который я пытаюсь построить для своего дяди, который вы можете увидеть here. (он до сих пор глубоко в стадии предварительной альфа, поэтому ссылки не работают). Он отлично работает как локальный файл, но как только я его размещаю, мой «липкий» заголовок начинает прилипать слишком рано, если вообще. Перезагрузка страницы работает примерно 1 раз в 10.

Возможно, я мог или не мог выделить причину проблемы: мой заполнитель. Мой липкий код сам прекрасно работает в большинстве случаев, за исключением одного: в качестве приставок для липких плат он фиксируется, и текст вскакивает на 90 с лишним пикселей. Для борьбы с этим, я добавил строки и в мой код ниже:

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 кажется, что он работает нормально, возможно, после нескольких перезагрузок. Тем не менее, я полностью в тупике. Кто-нибудь понял, как это исправить?

(Испытано в Chrome 64 бит и 32 бит, а также Chrome для Android, хотя это Glitchy на другом уровне. Работает отлично как локальную страницу, но не при размещении.)

Answer 1

Кажется, что эти код выполняется слишком рано, пока изображение еще не загружено, вы можете использовать инструмент chrome dev, чтобы добавить паузу, чтобы разбить на var origOffsetY = sticky.offsetTop;.

Тогда вы можете увидеть 2 случая: 22 или 642

Вы можете дополнительно проверять, что изображение, которое должно быть знамя, не завершается, когда 22 условие выполняется, и если вы используете document.querySelector('.splash img'), чтобы получить его и проверьте его высоту, вы увидите 0. В то время как в случае 642 вы получите 500.

Разница может быть в том, что иногда изображение происходит из кеша, иногда оно загружается из Интернета, поэтому оно может или не может определить высоту, когда выполняется ваш скрипт.

Таким образом, мы должны убедиться, что image, который находится в .splash уже загружен:

<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>