Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.04.2016, 23:41
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

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;.
Но я так понимаю, что и приведённый код выше, и альтернативный вариант - это т.н."костыли".

Как можно решить такую проблему должным способом?
Ответить с цитированием
  #2 (permalink)  
Старый 04.04.2016, 04:48
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Alexander Belov,
Возможно стоит в стиле скрыть это лого, а в конце страницы добавить css с открытием.
Можно помимо скрытия добавить opacity:0; и анимацию рапрозрачнивания transition: 0.7s;
А в стиле в конце страницы logo {display:block; opacity:1}
opacity (наверное) имеет смысл если у лого нет z-index, в противном случае его появление на странице будет только по окончании анимации при достижении opacity=1
Ответить с цитированием
  #3 (permalink)  
Старый 04.04.2016, 20:40
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

Deff,
Вы имеете в виду 2 файла CSS сделать? Основной и отдельно для этого лого? Основной вверху, а отдельный, "корректирующий" поведение, внизу?
Ответить с цитированием
  #4 (permalink)  
Старый 04.04.2016, 23:31
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Alexander Belov,
Внизу страницы не файл, а css в теге <style>
Смысла нет тратить время и трафик на загрузку файла из одной строки
Ответить с цитированием
  #5 (permalink)  
Старый 04.04.2016, 23:35
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автоматическая смена картинок через заданное время herotic Элементы интерфейса 45 15.05.2020 16:44
Style with position fixed JS Rzaxan Элементы интерфейса 6 09.03.2015 13:59
Оцените, пожалуйста код вёрстки OlegALL Ваши сайты и скрипты 18 26.07.2011 09:35
position fixed в IE6 sdff Общие вопросы Javascript 24 27.01.2010 15:16
вопрос по position fixed demi Events/DOM/Window 8 29.06.2009 06:40