In che modo Facebook genera le notizie dei segnaposto animati?

Question

Facebook ha una schermata di "caricamento" che si anima in un modo particolare quando si aspetta che tutto sia scaricato. I colori si alternano dal grigio al grigio chiaro

Ho guardato tutte le immagini scaricate, ma non riesco a trovarlo, quindi presumo che questo sia un trucco CSS.

Qualcuno mi può dire come questo è compiuto (e meglio ancora, quale processo ha usato per identificare la posizione di questa schermata di caricamento?)

Answer 1

Questo è abbastanza facile da realizzare e ciò che si basta vedere non v'è niente di più che un insieme di bianchi elementi div mascheramento uno sfondo animato che funziona in questo stesso modo (scusa il mio povero disegno):

Se sai come funziona lo stencil graffiti, dovrebbe essere abbastanza facile cogliere il concetto alla base di questo.

Non si poteva identificare le immagini perché non ci sono immagini animate reali, ma solo uno sfondo grigio con un'animazione CSS, questo è il loro attuale primo strato con gli elementi di mascheratura nascosto:

Come puoi vedere che non è altro che un div con un gradiente animato CSS3, qui sotto sono le regole CSS che stanno usando per questo.

._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 
    } 
} 

Come per il secondo strato (s) che utilizzano una serie di elementi div all'interno del contenitore di sfondo e posizionati tutti assolutamente, basta mascherare le parti che l'utente non dovrebbe vedere.

Quindi, ciò che resta per voi a vedere sono solo "buchi" o "spazi" lasciati tra i vari elementi div, che vi dà l'illusione di vedere lo sfondo animato sottostante per essere un unico elemento seduto su la cima.

Si potrebbe ottenere lo stesso più facilmente mettendo una maschera png sull'elemento ma richiede tempo per caricarsi a meno che non si usi un'immagine in linea ovviamente (ma hey, a nessuno piacciono le cose illeggibili nel loro markup e difficili da cambiare) quindi Penso che Facebook abbia scelto l'unico metodo di markup.

Per identificare questi elementi puoi appendere il browser premendo escape mentre gli elementi si stanno caricando, lasciandoti una pagina incompleta che poi puoi guardare in giro e ispezionare con i tuoi devtools preferiti di scelta - su Chrome, facendo clic sulla lente d'ingrandimento e quindi fare clic sull'elemento che si desidera ispezionare fa devtool saltare direttamente all'elemento che hai appena selezionato.

Tuttavia tenere presente, con l'avvento di framework client js come Angular questo trucco potrebbe non funzionare, (soprattutto se il javascript è già stato caricato e si desidera interrompere l'esecuzione tra le modifiche del percorso) in quel caso devi fermare il browser usando il debugger/breakpoint integrato.