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

Question

[Человек]

Здравствуйте.
Сделал экран с анимацией для прелоадера.
Длительность - 3 секунды.
Но сайт может загружаться быстрее, а может и медленее.
Как сделать так, чтобы анимация происходила во всю длительность загрузки страницы, но если сайт загружается меньше 3 секунд - сначала срабатывала полная анимация страницы, а потом уже отображался сайт.

В анимации через css изменяется ширина элементов и прозрачность.

Сама анимация
https://goo.gl/dG2iib

Comments

[Homr]

можешь просто через js спрятать этот div, когда страница полностью загрузится

$(window).load(function() {
/** код будет запущен когда страница будет полностью загружена, включая все фреймы, объекты и изображения **/
});

[Человек]

Homr: да, я так и делал. Код брал отсюда
https://hello-site.ru/preloader/

[Homr]

Человек: не устраивает?)

Answer 1

[Владимир]

Я так понимаю, вы не просто хотите крутить циклически анимацию прелодера пока сайт не загрузится, а растянуть один цикл на все время загрузки сайта.
Сделать это можно, но есть одно но.
Сначала про реализацию
1) Определяем минимум ресурсов, которые нужно загрузить для отключения прелодера (апи, картинки, шрифты)
2) В зависимостиот количества разбиваем анимацию на этапы (5 картинок, 2 шрифта, 2 апи - 9 этапов) и прописываем классы для перехода анимации между этапами, при чем анимация должна работать как между
.stage1->stage2 так и stage1-> stage9
3) Пихаем загрузку каждого ресурса в Promise и оборачиваем в Promise.each
bluebirdjs.com/docs/api/promise.each.html
4) При загрузке очередного ресурса меняем класс stagei-> stagei+1

Теперь о проблемах, нельзя предсказать заранее будут ли ресурсы грузиться равномерно или какойто ресурс будет грузиться дольше, поэтому анимация может быть немного рваной, но эту проблему нужно решить совместно с дизайнером, адаптировав анимацию.

Пример промиса для загрузки картинки
https://jsfiddle.net/4odtcx6o/4/

Answer 2

[sasha]

как вариант можно создать отдельный css файл в котором сделать чтото .preloader{display:block} и этот файл грузить последним файлом.

практически это стремная затея, а теоретически это может быть приемлимым результатом.

Comments

[Homr]

не делайте так никогда...

[sasha]

Homr: почему?

[Андрей]

лучше через js смотреть на запросы, и крутит прелоадер пока они фетчаться

[sasha]

Андрей: это лучше. но непонятно чем мой способ хуже?

[Homr]

sasha: зачем делать еще один файл css, если можно элегантно через js спрятать div или вообще удалить

[sasha]

Homr: целеполагание.

если задача не использовать js то тот способ что я предложил оптимальный.
а если человек задает такой вопрос то велика вероятность что он просто не знает js.

[Homr]

тогда будет красивее сделать так:

<style type="text/css">
   .preloader
{
display:none;
} 
  </style>

[sasha]

Homr: да, но это случится сразу после того как загрузится основной документ, а нас интересует чтобы все показалось после полной загрузки всех файлов в документе, а это происходит синхронно. Тоесть тот способ что я описал как раз сработает когда загрузятся все js/css/img

[Homr]

sasha: короче, все это лютая порнография.

[sasha]

Homr: отсюда и

практически это стремная затея, а теоретически это может быть приемлимым результатом.

[Nik]

это просто мегакостыль! порно в чистом виде))

[sasha]

Nik: окей, как решить эту проблему на чистом css?

[Nik]

sasha: зачем ее решать на чистом css??когда есть js!
это как взять грабли и начать забивать им гвозди)зачем это делать?!)

[sasha]

Nik: ну например у меня js по умолчанию выключен. Иногда в проекте может быть требование что критический функционал должен работать без js и т д.

[nickensoul]

sasha, серьезно? И в 2018 веке тоже, наверное, выключен js?) Про onion-сети не говорили, вроде)
Если нет js как требование, то на кой черт вообще прелоадер, что за бред)))
Не удивляйтесь, что Вас тут затыкали, подумайте, прежде чем предлагать необдуманные решения.

[sasha]

nickensoul, вероятно Вы не натыкались на пример js кода который открывает калькулятор(виндовый, системный). Существует такое понятие как Zero-Day уязвимости.
Или, например, последние уязвимости процессоров можно эксплуатировать через js. https://www.reddit.com/r/javascript/comments/7ob6a...

Ну, примерно из-за этого у меня по умолчанию выключен js.

[nickensoul]

sasha, Вероятно, натыкался) так же, как и в курсе про уязвимости процессоров и доступ из браузера.
Вы человек именно из той гильдии, что работает с учреждениями, в 2018 использующих IE, редакций, эдак, 2002-7 годов. И яро отстаивает свою точку зрения.
И, кстати, Ваши доводы к вопросу имеют ровным счетом никакого отношения.
Оффтоп закончен. Удачи!

[sasha]

nickensoul, Раз натыкались и задаете подобный вопрос, значит, похоже, вера в добрый мир сильна, или другой сакральный смысл, не подвластный мне. Работаю в такой организации где ИЕ 2009+ поддерживается, но мне не понятно при чем тут ИЕ к данной теме, если расскажете, буду благодарен.
И, непонятно, какие конкретно доводы к какому конкретно вопросу не имеют отношения?

Answer 3

[Дмитрий Еремин]

Так, объясните мне, почему вот так нельзя?

$(window).load(function() {
    startPreloader();
});

$(document).ready(function() {
    stopPreloader();
});

Comments

[Андрей]

если я не ошибаюсь то он не будет крутиться если стягиваються данные, он будет крутиться пока стягивается сами файлы страницы js, html, css, документ может быть и построен без данных например постов

[Дмитрий Еремин]

Андрей: ну, безусловно, должно что-то сначала загрузиться на машину, чтобы было, чему крутиться
Иначе откуда браузер должен понять, как себя вести, пока остальные файлы грузятся?
Нужно, чтобы документ содержал в себе минимум контента, ссылки на то, что нужно догрузить и скрипт прелоадера.

[Андрей]

Дмитрий Еремин: зачем показывать страницу без контента?

[Дмитрий Еремин]

Андрей: незачем. Поэтому чувак и хочет прелоадер показывать, пока все грузится, ну