Как сделать простую предварительную загрузку сайта?

Question

[Софья]

Хочу узнать, как сделать так, чтобы пока основное содержимое грузится, на весь экран была заставка, а потом она исчезала?

У меня есть готовый сайт, но из-за большого объема фотографий и в принципе самой информации он долго грузится. Поэтому и решила подумать над созданием скрывающего это на какое-то время элемента.
Как в html и CSS коде оформить это так, чтобы заставка загружалась первой, а потом секунд через 10 исчезала совсем?

Comments

[Вадим]

потом секунд через 10 исчезала совсем

А если у меня быстрый интернет и всё загрузится за 2 секунды, Вы обяжете меня ещё 8 секунд ждать?
А если я с телефона и у меня плохой сигнал, но сайт мне очень нужен и я готов подождать, но контент не загрузится и за 20 секунд?

А вообще, по статистике, если пользователь не может начать взаимодействие с сайтом через 3 секунды после открытия - он покидает сайт.
Точно этого хотите?

[Софья]

Вадим, Ну не знаю, просто пока у меня сайт грузится две секунды, выглядит это немного странно. Типо первая фотка с панели навигации на 90% экрана и белый фон.
Думаете не стоит заморачиваться?

[Вадим]

fell_from_the_grace, Думаю что Вы хотите вырубить топором то, что нужно править пером.
Слишком радикально и неоднозначно.

[Вадим]

fell_from_the_grace, Программа минимум это повесить preload анимацию, а по событию загрузки в js - скрывать этот лоадер.

[Софья]

Вадим, а можете пожалуйста посмотреть мой сайт, не божественный, но я старалась
https://esenin641.ru/

[Вадим]

fell_from_the_grace, Ну и вот, будь я целевым посетителем сайта, я бы 9.8 секунд смотрел бы на загрузку, а не читал бы, хотя у меня визуально всё загрузилось меньше чем за секунду.
Но я смотрю с хорошего ПК на 100мб интернете.

[Софья]

Вадим, то есть вас как пользователя в принципе бы устроил такой (момент, который сейчас, а не прелоадер) небольшой косяк в плане разбросанных фотографий?

[Вадим]

fell_from_the_grace, В плане дизайна Вы имеете в виду? Да вроде нормально.

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

Не, ну это перебор ))

[Софья]

Да я понимаю, что проблем много, но одна не могу решить их(
Вы случайно не заинтересуетесь оптимизацией сайта, разработанного кем-то другим?

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

fell_from_the_grace, нет уж, спасибо )) Мне своего хватает ))

[Софья]

Алексей Ярков, понимаю)
У вас, как я поняла, масштабный проект, ну что ж, тогда удачи и сил на его реализацию!

Answer 1

[Владимир]

Если нужно сделать прелоадер не по времени загрузки всех ассетов, а по таймеру подойдет следующий код

<div class="vk-preloader">
  <style type="text/css" scoped>
    .vk-preloader {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: #bbb;
      text-align: center;
      font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
      font-size: 50px;
      font-weight: bold;
      color: #333;
    }

    .vk-preloader.hidden {
      opacity: 0;
      transition: opacity 2s;
    }

    .vk-preloader.none {
      display: none;
    }

  </style>

  Hello World
</div>
<script>
  const TIME_TO_WAIT = 4;
  const preloader = document.querySelector('.vk-preloader');
  const removePreloader = function() {
    preloader.classList.add("none");
    preloader.removeEventListener('transitionend', removePreloader);
  };
  const hidePreloader = function() {
    preloader.classList.add("hidden");
    preloader.addEventListener('transitionend', removePreloader);
  };
  if (preloader) {
    setTimeout(hidePreloader, TIME_TO_WAIT * 1000);
  }

</script>

Если нужно отслеживать загрузку всех ассетов то последние три строки нужно заменить

if (preloader) {
    window.addEventListener('load', (event) => {
      hidePreloader()
    });
  }

Comments

[Софья]

Владимир Спасибо вам огромное! Действительно полезное решение, которое сразу отвечает на несколько вопросов по тому, что мне было необходимо узнать)

Answer 2

[valgerofficial]

Ответ на ваш вопрос :)

Comments

[Софья]

Спасибо большое)) Попробовать стоит, вроде бы не очень сложно

[valgerofficial]

fell_from_the_grace, Это легче чем кажется, если вдруг вы боитесь что у вас не получиться, я могу вам с этим помочь)

[thatguy1]

valgerofficial, А вы точно официальный?

[valgerofficial]

thatguy1, официальней некда)

[Владимир]

valgerofficial, Если немного переписать без jquery то прелоадер будет работать до того, как загрузится jquery
Вместо delay и fadeOut вполне можно использовать setTimeout и смену классов.

[valgerofficial]

Владимир, Вся идея в том, что бы контент загружался.. а после пропадал прелоадер, то есть.. пока контент не загрузиться - прелоадер не исчезает. Если использовать setTimeout, то ты просто покажешь загрузку на время. А что если контент еще не загрузился, а прелоадер пропал? Или наоборот, контент загрузился, а прелоадер еще работает. setTimeout - тут не подойдет) Да и вообще я не думаю что этот метот подойдет для любого прелоадера.

[Софья]

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

[Владимир]

valgerofficial, Ответ - нет Все будет работать как и раньше, только не прийдется ждать jquery
По хорошему и setTimeout там не нужен, на onload убираешь класс и все, прописываешь в css анимацию прелоадера, чтобы убирался красиво.
Принципы прелоадера такие
1) Минимальный CSS нужный для работы прелоадера грузится до боди
2) Остальное грузится после
3) Скрипт грузится после боди, в начале скрипта на событие onload убирается прелоадер

[Софья]

Владимир, я попробовала несколько раз сделать прелоадер, но он либо не уходит, либо исчезает только после пары минут ожидания, что просто ужасно(
Как вы думаете, вас бы заинтересовало предложение немного помочь мне с сайтом?
(Просто уже не знаю, что с ним сделать так, чтобы было на достойном уровне)

[Владимир]

fell_from_the_grace,
Просто проанализируйте что именно тормозит загрузку сайта. Проблема может быть пустяковой - оптимизировать картинки, убрать лишние шрифты, использовать оптимизированную версию фреймвока вместо полной.

Событие onload происходит в момент, когда на страницу загрузились все ассеты (скрипты, картинки, стили, прочие файлы которые упоминаются в html и css), видимо у вас что то догружается очень долго. Или напихали больших неоптимизированных картинок, или тянете внешний скрипт или картинку с медленного ресурса, или тянете с гугла шрифт со всеми начертаниями вместо того, чтобы взять только то, что используется, или и то и другое и третье вместе.
До добавления прелодера откройте вкладку network в девелопер консоли и смотрите что у вас загружается дольше всего, скрин с результатом можете закинуть сюда. Ну и добавьте информацию на какой CMS делали сайт или верстали полностью руками.
Извините, у меня полная загрузка по основной работе, поэтому парт тайм проектами не занимаюсь. Могу попробовать помочь тут в комментах.

ЗЫ вот пример того, что вас интересует в девелопер консоли FF

[Софья]

Владимир,

верстали полностью руками

я настолько мало была знакома с разработкой сайтов, что начала все делать на html и css, да еще без всяких конструкторов и готовых шаблонов... получилось в общем, что-то хорошее, но если разбираться, то даже страшно становится.

я так чувствую, консоль я смотрю не ту, но и из этой видно, что у меня оооочень многое очень долго грузится

[Владимир]

Софья,
Общее время загрузки ассетов полторы минуты
Вас интересует вот эта колонка, но вы так и не показали в скрине что там грузится дольше всего, все что на вашем скриншоте укладывается в 20 секунд

[Софья]

Владимир, но 20 секунд это ведь не так уж и быстро или можно не считать, что это прям критично?

[Владимир]

Софья, Общее время загрузки того куска, который вы мне показали - 20 секунд, всех 9 файлов. Начните с того, что действительно тормозит, проскрольте вниз и просмотрите весь водопад, что там выделяется на общем фоне.

[Софья]

Владимир, да вроде бы ничего такого не выделяется.. может просто из-за общей совокупности такое время загрузки.
А вот предположим, я хочу сделать совершенно простую такую заставку:


что мне еще нужно разместить и куда, чтобы она просто стала прозрачной спустя пару секунд? (я не совсем понимаю этот момент)

[Владимир]

после открывающего body

<div class="vk-preloader">
  <style type="text/css" scoped>
    .vk-preloader {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: #bbb;
      text-align: center;
      font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
      font-size: 50px;
      font-weight: bold;
      color: #333;
    }

    .vk-preloader.hidden {
      opacity: 0;
      transition: opacity 2s;
    }

    .vk-preloader.none {
      display: none;
    }

  </style>

  Hello World
</div>
<script>
  const TIME_TO_WAIT = 4;
  const preloader = document.querySelector('.vk-preloader');
  const removePreloader = function() {
    preloader.classList.add("none");
    preloader.removeEventListener('transitionend', removePreloader);
  };
  const hidePreloader = function() {
    preloader.classList.add("hidden");
    preloader.addEventListener('transitionend', removePreloader);
  };
  if (preloader) {
    setTimeout(hidePreloader, TIME_TO_WAIT * 1000);
  }

</script>

[Софья]

Владимир, Огромное вам спасибо!
Я не знаю, получилось бы у меня без вашей помощи сделать это, но сейчас у меня работает загрузка в мобильных версиях и я несказанно рада этому!
Только мне предстоит разобраться, почему в мобильной версии центральное изображение находиться далеко за видимостью экрана, но это уже немного другой вопрос)

[Владимир]

Софья, вынес кусок кода в ответ, можете отметить решением