В Facebook есть экран загрузки, который оживляет особым образом, ожидая загрузки всего. Цвета чередуются от серого до светло-серого.
Я просмотрел все загруженные изображения, но не могу их найти, поэтому я предполагаю, что это трюк CSS.
Может ли кто-нибудь сказать мне, как это делается (и тем лучше, какой процесс вы использовали для определения местоположения этого экрана загрузки?)
Это довольно легко выполнить, и то, что вы просто видите, представляет собой не что иное, как набор белых элементов div, маскирующих анимированный фон, который работает таким же образом (извините за мой плохой рисунок):
Если вы знаете, как работают граффити с трафаретами, тогда достаточно просто понять концепцию, лежащую в основе этого.
Вы не могли идентифицировать изображения, потому что нет реальных анимированных изображений, а просто серый фон с анимацией css, это их фактический первый слой с скрытыми скрытыми элементами:
Как вы можете видеть, это не что иное, как div с анимированным градиентом CSS3, ниже здесь используются правила CSS, которые они используют для него.
._2iwq {
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: placeHolderShimmer;
-webkit-animation-timing-function: linear;
background: #f6f7f8;
background-image: -webkit-gradient(linear, left center, right center, from(#f6f7f8), color-stop(.2, #edeef1), color-stop(.4, #f6f7f8), to(#f6f7f8));
background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
background-repeat: no-repeat;
background-size: 800px 104px;
height: 104px;
position: relative;
}
@-webkit-keyframes placeHolderShimmer {
0% {
background-position:-468px 0
}
100% {
background-position:468px 0
}
}
В соответствии со вторым уровнем (ов) они используют кучу элементов div внутри контейнера фона и полностью позиционируют, просто маскируя части, которые пользователь не должен видеть.
Итак, что вам осталось увидеть - это просто "дыры" или "пробелы", оставшиеся между различными элементами div, что дает вам иллюзию увидеть, что анимированный фон ниже - один элемент, расположенный сверху.
Вы можете сделать то же самое проще, поместив маску png над элементом, но вам нужно время для загрузки, если вы, конечно, не используете встроенный образ (но эй, никто не любит нечитаемые вещи в их разметке и трудно меняются), поэтому я подумайте, почему Facebook решил пойти только на разметку.
Чтобы идентифицировать эти элементы, вы можете повесить свой браузер, нажав кнопку escape, пока элементы загружаются, оставив вас с незавершенной страницей, которую вы можете осмотреть и осмотреть с помощью избранных вами devtools - в Chrome, щелкнув увеличительное стекло и затем щелкните элемент, который вы хотите проверить, чтобы devtool сразу переместился к элементу, который вы только что выбрали.
Однако имейте в виду, что с появлением js-клиентских фреймворков, таких как Angular, этот трюк может не работать (особенно, если javascript уже загружен и вы хотите остановить выполнение изменений маршрута) в этом Если вам нужно остановить браузер, используя встроенные отладчики/точки останова.