https://origami1024.github.io/progress/
- Скрипт добавляет загрузочный скрин показывающий прогресс загрузки
- Загрузка изображений - таймер проверяет состояние complete всех img на странице
- Дебаг инфа о том, что учитывается в подсчете прогресса на экране
- В центре картинка, которая скрывается за свг маской, маска по загрузке уезжает - плавно показывая картинку
- Браузеры, на которых тестировал:
- Работает хорошо: firefox, chrome, chrome mobile;
- Работает худо-бедно, с переводом в режим без css анимации, возможно нужны доработки: Microsoft Edge 41
- Прогресс загрузки состоит из:
- кол-ва img элементов, загруженных в dom, с .complete == true
- кол-ва загруженных в dom тегов script
- documentreadystate
<head>
<link rel="preload" href="assets/img/logo2.svg" as="image">
<script src="assets/accubar.js"
data-maskbg="#333333"
data-picPath="assets/img/logo2.svg"
data-ghostdur=0
data-svgw=142
data-svgh=62
data-grayscale="true"
data-cssanim="true"
data-debug="true"
data-imgsPerTick=20>
</script>
<link href="assets/accubar.css" rel="stylesheet" />
...
</head>
- Скрипт нужно помещать перед head
- Стили
<link href="assets/accubar.css" rel="stylesheet" /> - Нужно, чтобы браузер грузил свгшку первой - для этого в HTML в head, нужно добавлять
<link rel="preload" href="assets/img/progress_v5.svg" as="image"> - Скрипт принимает такие параметры в теге: data-svgw, data-svgh, data-grayscale, data-ghostdur, data-cssanim, data-picPath, data-maskbg, data-debug
- data-svgw - (число), длина или ее пропорция, исходить лучше всего из viewBox главной свгшки
- data-svgh - (число), высота или ее пропорция, исходить лучше всего из viewBox главной свгшки
- data-grayscale - (true/false), нужно ли фоновый дубль изображения;
- data-maskbg - (hex цвет, примеры: #f0f0f0, #f00), цвет фонового дубля изображения, применяемый поверх оригинальных цветов свг составным фильтром;
- data-ghostdur - (число, пример: 2000), после окончания загрузки и последней анимации, анимация скрытия враппера будет длится столько ms;
- data-cssanim - (true/false), если true - по прогрессу меняется css переменная, которая указана в transform: translate, что обеспечивает плавную анимацию; если false, то просто двигать координату x в части маски в svg
- data-picPath - (строка, пример: "assets/img/logo2.svg"), путь к главной свгшке
- data-debug - (true/false), выводить дебаг-информацию или нет
- data-imgsPerTick - (1/20/Infinity), параметр, влияющий с одной стороны на плавность инимации, с другой может приводить к лишнему ожиданию, когда всё уже загрузилось
- Перевести анимацию на js - возможно добиться лучшей совместимости со старыми браузерами + изменение css походу лишнее, можно напрямую работать со style.transform, не дожидаясь загрузки cssок к тому-же.
- Добавить текущий фейковый прогресс, продумать как рассчитывать его увеличение и рисовать анимацию прямо из него в requestAnimationFrame
- Добавить тестовую страничку с 300 изображений поменьше
- Пересмотреть как лучше делать - .complete с таймером или onload для изображений
- Сделать код вывода дебага более читабельным
- Другие опции анимации маски, например: с права на лево, снизу вверх
- Вариант маски - круг из центра с радиусом 0 в полную картинку
- Вариант - делать большой блюр и снижать его по загрузке, и вообще разные фильтры
- Можно сделать с css файлами то же, что сделано со скриптами, но из-за их небольшого веса (относительно картинок или даже скриптов) визуально в прогрессбаре этого не будет заметно, разве что изначально прогрессбар будет уже начинать с дополнительных завершенных процентов.
- Ajax запросы не реализованы
- изменить picPath
- изменить svgWidth и svgHeight, на ПРОПОРЦИОНАЛЬНЫЕ тем, что в свг viewBox; пропорционально, чтобы свгшка правильно сжималась/растягивалась по ширине и высоте
- установить grayscaleBGCopy в нужное значение - true/false
- Pace.js https://github.hubspot.com/pace/. Хорошая библиотека, пытался изначально использовать, взял у них много хороших идей.
- Это обсуждение https://stackoverflow.com/questions/14218607/javascript-loading-progress-of-an-image
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent