Скроллр ломается после обновления страницы

Question

Мой сайт использует Skrollr для создания эффекта параллакса на фоне главной страницы. Он работает отлично... если вы не обновите страницу:

Если вы зайдете на сайт, вы увидите, что фон прокручивается с другой скоростью, как контент, и они оба заканчиваются вместе внизу страницы. Однако, если вы обновите страницу, фон перестанет прокручиваться на полпути вниз. Я думаю, что фоновый div прокручивается намного быстрее, чем обычно, и слишком быстро добирается до дна. Если вы щелкнете по странице и вернетесь к ней, она будет работать нормально. Проблема только в обновлении.

Вот код для фонового div:

<div id="background" class="skrollable"
     <?php if (is_page('the-couple')) { ?>
        data-0="background-position:0% 0%;"
        data-end="background-position:0% 100%;">
    <?php } else { ?>
        data-0="background-position:0% 100%;"
        data-end="background-position:0% 100%;">
    <?php } ?>
</div>

Я попытался обновить skrollr на window.load, но, похоже, это не решило проблему. Кто-нибудь еще сталкивался с этим? Какие-либо решения?

Answer 1

Я не использовал Skrollr, но вот что, по-моему, происходит:

Вы загружаете свой скрипт с сайта cdnjs.cloudflare.com. Эта загрузка выполняется асинхронно. Вы, вероятно, установили скорость прокрутки в вашем скрипте, и он загружается первым. После этого скрипт из cloudfare загружается и, вероятно, настроен на скорость по умолчанию.

При второй загрузке страницы оба сценария загружаются из кэша, и сценарий cloudfare, вероятно, загружается раньше.

Решение:

1. Скачайте скрипт из cloudfare и включите его на своей странице ДО установки скорости. Просто переместите это сначала в голову как первый тест.

2. Установите скорость и функции вызова при загрузке страницы.