Параллакс во время загрузки страницы
 

Доброго времени суток!

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

Без jquery:

script.js

window.addEventListener('load', function () {
    var container = document.querySelector('.parallax');
    var layers = container.querySelectorAll('.parallax__layer');
    var speeds = [];
    for (var i = 0; i < layers.length; i++) {
        speeds[i] = layers[i].getAttribute('data-speed') / -100;
    }
    window.addEventListener('scroll', function () {
        var y = this.pageYOffset;
        for (var i = 0; i < layers.length; i++) {
            layers[i].style.top = y * speeds[i] + 'px';
        }
    });
    container.className += ' visible';
});

style.css

.parallax {
    visibility: hidden;
}
.visible {
    visibility: visible;
}

Спасибо, все получилось!