Как сделать прелоадер только при первом заходе на сайт?

Question

[AlexaDin]

Как сделать прелоадер только при первом заходе на сайт? Сейчас он крутится всегда при переходе по страницам, а хотелось бы только при первом заходе на сайт.

Прелоадер такой - jsfiddle.net/593Lqqnm/25.

Answer 1

[Nikita Velko]

Пример решения с localStorage
Пока писал пример на фидле, товарищ imdeveloper опередил меня. :)
Но он советует вам правильно, лучше использовать localStorage.
Только имейте в виду, что в safari в инкогнито режиме localStorage не работает. Поэтому там при обновлении странички пользователь будет каждый раз видеть прелоадер.

Comments

[AlexaDin]

Все отлично, но получилось, что прелоадер при первой загрузке держится 2 сек. как у нужно, а при остальных загрузках держится пока не загрузится страница (мелькает так скажем). Можно как-то сделать, чтобы при остальных загрузках его вообще не было?

[Nikita Velko]

AlexaDin, ну тут уже прямо зависит от того, как вы реализовали свой прелоадер. Если он у вас есть изначально в DOM-дереве и он не спрятан, то возможно вам стоит первым делом проверять наличие ключа в localStorage, а потом уже задавать видимость прелоадеру.

[AlexaDin]

localStorage.setItem('preloaderIsShown', 'true'); 
var localValue = localStorage.getItem('preloaderIsShown');
console.log(localValue); 
localStorage.removeItem("preloaderIsShown");
localStorage.clear()

Как-то так?

[Nikita Velko]

AlexaDin, не, не совсем.
Ваша функция показывающая или скрывающая прелоадер должна запускаться самой первой и как можно быстрее. Поэтому даже было бы разумно ее вынести в отдельные тег script и написать его выше всех остальных скриптов. Но тогда jQuery в этом скрипте будет недоступен и вам придется делать выборку по DOM'у нативными средствами (что очень просто).
Сама функция будет работать примерно так:
Вы проверяете наличие ключа в localStorage.
Если ключ есть, то все ок.
Если ключа нет, то вешаете класс на ваш прелоадер, который сделает его видимым для пользователя, а затем пишете ключ в localStorage.
Стало яснее? :)

[AlexaDin]

Написала вам на почту

Answer 2

[imdeveloper]

Рекомендую использовать local storage вместо кук, потому что когда человек зайдет на сайт через определенное время, то эта кука остается на долгое время и перлоадер не будет показываться.
Записать переменную в браузер примерно вот так:
localStorage.setItem('showPreloader', 'false')
и далее проверять эту переменную

if(localStorage.getItem('showPreloader') == false)
{
  //не показываем прелоадер
} else {
 //показываем
}

Comments

[Алексей Ярков]

Ну видимо все-таки sessionStorage. Ибо localStorage сам через время не почистится.

[imdeveloper]

Алексей Ярков, верно

Answer 3

[riot26]

Записать в куки какой-то флаги не показывать, если флаг есть.
Примерно так: jsfiddle.net/riot26/593Lqqnm/354
(использовал jquery-cookie)