Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.73/11: Рейтинг темы: голосов - 11, средняя оценка - 4.73
0 / 0 / 0
Регистрация: 30.10.2017
Сообщений: 11

Preloader для сайта

03.12.2017, 14:28. Показов 2417. Ответов 10
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Как сделать так, чтобы Preloader показывался всего один раз, тоесть при простом обновлении страницы он снова не грузился!?
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
03.12.2017, 14:28
Ответы с готовыми решениями:

Preloader для части страницы
Структура страницы такова: - Имя сайта - Меню - Контент Прелоадер загораживает сразу всю страницу, а мне нужно, чтобы он...

Preloader
Есть код <style type="text/css">#hellopreloader>p{display:none;}#hellopreloader_preload{display: block;position: fixed;z-index:...

Preloader json
Здравствуйте, на некоторых страницах моего сайта грузятся большие JSON файлы, ну и страница открывается примерно 5 секунд. Можно ли...

10
the hardway first
Эксперт JS
 Аватар для j2FunOnly
2475 / 1847 / 910
Регистрация: 05.06.2015
Сообщений: 3,610
04.12.2017, 12:52
Можно, например, хранить значение в sessionStorage и перед показом релоадера проверять: если есть такой ключ, то не показываем, если нет - то показываем и создаем ключ. Следовательно при простом обновлении страницы ключ останется, а при закрытии вкладки / браузера удалится.
JavaScript
1
2
3
4
5
6
7
8
9
10
11
function preloader() {
  if (sessionStorage.getItem('preloader-uuid-here')) {
    console.log('User just refreshed the page');
    return;
  } else {
    alert('Show Preloader!');
    sessionStorage.setItem('preloader-uuid-here', '1');
  }
}
 
preloader();
https://jsfiddle.net/j2FunOnly/4wnxhqcn/
1
0 / 0 / 0
Регистрация: 30.10.2017
Сообщений: 11
04.12.2017, 23:08  [ТС]
При использовании данного метода возникает проблема, прелоадер зацикливается... В чем может быть проблема?
0
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
04.12.2017, 23:47
Как он может зацикливаться, есть здесь нет ничего даже близко похожего на цикл?)
0
the hardway first
Эксперт JS
 Аватар для j2FunOnly
2475 / 1847 / 910
Регистрация: 05.06.2015
Сообщений: 3,610
05.12.2017, 08:35
Цитата Сообщение от ANTON_ZIN_ Посмотреть сообщение
прелоадер зацикливается... В чем может быть проблема?
В чём угодно. Надо смотреть как конкретно у вас это реализовано...
0
0 / 0 / 0
Регистрация: 30.10.2017
Сообщений: 11
05.12.2017, 20:14  [ТС]
Цитата Сообщение от j2FunOnly Посмотреть сообщение
В чём угодно. Надо смотреть как конкретно у вас это реализовано...
Вот так у меня выглядит код, в результате чего прелоадер просто крутится не закрываясь...
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function preloader() {
  if (sessionStorage.getItem('preloader-uuid-here')) {
    return;
  } else {
    $(window).on('load', function () {
    setTimeout(function() {
    var $preloader = $('#page-preloader'),
        $spinner   = $preloader.find('.spinner');
    $spinner.fadeOut();
    $preloader.delay(350).fadeOut('slow');
    }, 1000)
    });
    sessionStorage.setItem('preloader-uuid-here', '1');
  }
}
 
preloader();
Добавлено через 1 минуту
Цитата Сообщение от msheal Посмотреть сообщение
Как он может зацикливаться, есть здесь нет ничего даже близко похожего на цикл?)
Я имею ввиду, что он крутиться и не закрывается!
0
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
06.12.2017, 01:38
Весьма странное поведения прелоадера - при простом обновлении страницы не закешированные данные буду грузиться, а прелоадера не будет. Исправленный код:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function preloader() {
  var $preloader = $('#page-preloader'),
          $spinner   = $preloader.find('.spinner');
      
  // в сторейдже нет элемента - прелоадер прячем с задержкой
 if (!sessionStorage.getItem('preloader-uuid-here'))  {
    setTimeout(function() {
      $spinner.fadeOut();
        $preloader.delay(350).fadeOut('slow');
        }, 1000)
   
    sessionStorage.setItem('preloader-uuid-here', true);
   
    }else {
    // в сторейдже есть элемент - прелоадер прячемсразу
    $spinner.hide();
    $preloader.hide();
  }
} 
 $(window).on('load', function () {
preloader();
 })
1
0 / 0 / 0
Регистрация: 30.10.2017
Сообщений: 11
06.12.2017, 01:45  [ТС]
Цитата Сообщение от msheal Посмотреть сообщение
Весьма странное поведения прелоадера - при простом обновлении страницы не закешированные данные буду грузиться, а прелоадера не будет. Исправленный код:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function preloader() {
  var $preloader = $('#page-preloader'),
          $spinner   = $preloader.find('.spinner');
      
  // в сторейдже нет элемента - прелоадер прячем с задержкой
 if (!sessionStorage.getItem('preloader-uuid-here'))  {
    setTimeout(function() {
      $spinner.fadeOut();
        $preloader.delay(350).fadeOut('slow');
        }, 1000)
   
    sessionStorage.setItem('preloader-uuid-here', true);
   
    }else {
    // в сторейдже есть элемент - прелоадер прячемсразу
    $spinner.hide();
    $preloader.hide();
  }
} 
 $(window).on('load', function () {
preloader();
 })
Огромное спасибо, получилось отлично, но есть небольшое НО, при повторной загрузке главной страницы Preloader показывается на, буквально, долю секунды, а затем пропадает как положено, можно ли сделать что бы он вообще не появлялся!?
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
06.12.2017, 05:06
так всё-таки задача ваша для сайта или для какой-то отдельной страницы сайта?
разница принципиальная, и решения совершенно разные
0
0 / 0 / 0
Регистрация: 30.10.2017
Сообщений: 11
06.12.2017, 10:59  [ТС]
Цитата Сообщение от kalabuni Посмотреть сообщение
так всё-таки задача ваша для сайта или для какой-то отдельной страницы сайта?
разница принципиальная, и решения совершенно разные
Для всего сайта, ну как, он должен появлятся только при первичном заходе на сайт, при дальнейших переходах, он не должен появлятся, до окончания сессии браузера.
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
07.12.2017, 08:22
Для сайта, если речь идёт о его страницах, открываемых в одном окне, есть древнее решение
JavaScript
1
2
3
var dmn = document.domain
if (window.name != dmn) {показываем прелоадер}
onload = function () {window.name = dmn}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
07.12.2017, 08:22
Помогаю со студенческими работами здесь

Не работает Preloader
Доброго времени суток форумчане! Когда создаю preloader, он работает, но перед его появлением успевает показаться сайт без стилей, в чем...

Preloader не прелоадит
Прошу помочь разобраться. Для громоздкой страницы (конструктор Adobe Muse) нужен прелоадер. Перепробовал кучу виджетов. Проблема...

Preloader background cookies
надеюсь что раздел выбрал верно , так как в задаче используется jQuery, подобной темы не нашел, поправьте если плохо смотрел; вопрос не...

Поправить скрипт js с preloader
Добрый день! Есть прелоадер на сайте с кодом: <!-- Preloader --> <div class="preloader"> <div class="spinner-dots"> ...

Не правильная работа preloader
на сайте есть preloader jquery на сайте подключен 3.2.1 версия html в начале страницы: <div class="preloader"> ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru