Каким образом Facebook генерирует анимированные теги для заметок?

Question

В Facebook есть экран загрузки, который оживляет особым образом, ожидая загрузки. Цвета чередуются от серого до светло-серого

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

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

Answer 1

Это довольно легко сделать, и то, что вам просто видеть не что иное, как совокупность белых 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 уже загружен и вы хотите остановить выполнение между изменениями маршрута) в этом случае вы должны остановить свой браузер, используя встроенные отладчики/точки останова.