Position: fixed image загрузка
 

Привет!

Прошу прощения, что вопрос без примера кода. Есть подозрение, что это известная проблема, кто сталкивался, тот поймёт сразу, о чём речь.

У меня на SPA есть лого в верхней section с position: fixed.
Проблема в том, что если перезагрузка страницы производится не с самой верхней части (по умолчанию), а после прокрутки на нижние section, то появляется это лого на фоне остального контента. Если перезагружать с верхней section, то всё ОК, т.к. лого сразу и появляется на своём законном месте.

Т.е., прокручиваем страницу вниз, перезагружаем (чтобы после перезагрузки оказаться в том же разделе), видим контент нашей section, а на его фоне лого. Но любое движение мышкой или нажатие клавиши сразу "удаляет" лого.

Нашёл одно из решений в виде:

function displayImage() {
    document.getElementById('imagePrev').src = this.src;
    window.setTimeout(getImage, refreshInterval);
}
function getImage() {
    var Preload = new Image();
    Preload.onload = displayImage;
    Preload.src = 'ScreenTask.jpg?rand='+Math.random();
}

getImage();

Вариант 2: прописать всему контенту, кроме этого лого z-index: 10; например, а для лого z-index: 5;.
Но я так понимаю, что и приведённый код выше, и альтернативный вариант - это т.н."костыли".

Как можно решить такую проблему должным способом?

Alexander Belov,
Возможно стоит в стиле скрыть это лого, а в конце страницы добавить css с открытием.
Можно помимо скрытия добавить opacity:0; и анимацию рапрозрачнивания transition: 0.7s;
А в стиле в конце страницы logo {display:block; opacity:1}
opacity (наверное) имеет смысл если у лого нет z-index, в противном случае его появление на странице будет только по окончании анимации при достижении opacity=1

Deff,
Вы имеете в виду 2 файла CSS сделать? Основной и отдельно для этого лого? Основной вверху, а отдельный, "корректирующий" поведение, внизу?

Alexander Belov,
Внизу страницы не файл, а css в теге <style>
Смысла нет тратить время и трафик на загрузку файла из одной строки

Deff,
Опытным путём пришёл к выводу, что самый "безболезненный" способ решить вопрос - прописать вместо position: fixed position: absolute;