Segnaposti e fallback

In the spirit of perceived performance and progressive enhancement, it's best practise in AMP to provide placeholders and fallbacks wherever possible.

Alcuni elementi incoraggiano anche il loro utilizzo riducendo le restrizioni: ad esempio, fornendo un segnaposto per amp-iframe, esso può essere utilizzato nella parte superiore della pagina (che non funzionerà senza).

Segnaposti

Gli elementi marcati con l'attributo placeholder agiscono come segnaposto per l'elemento AMP padre. Quando indicato, un elemento placeholder deve essere figlio diretto dell'elemento AMP. Gli elementi marcati con l'attributo placeholder avranno sempre la proprietà fill rispetto all'elemento AMP padre.

<amp-anim
  src="/static/inline-examples/images/wavepool.gif"
  layout="responsive"
  width="400"
  height="300"
>
  <amp-img
    placeholder
    src="/static/inline-examples/images/wavepool.png"
    layout="fill"
  >
  </amp-img>
</amp-anim>

Per impostazione predefinita, il segnaposto viene immediatamente mostrato al posto dell'elemento AMP, anche se le risorse dell'elemento AMP non sono state scaricate o inizializzate. Una volta pronto, l'elemento AMP in genere nasconde il suo segnaposto e mostra il proprio contenuto.

Fallback

È possibile specificare l'attributo fallback su un elemento per indicare il comportamento alternativo in caso di:

• elementi non supportati dal browser
• contenuti che non possono essere caricati (ad esempio, Tweet cancellati)
• tipi di immagini non supportati (ad esempio, WebP non è supportato in tutti i browser)

Si può impostare l'attributo di fallback su qualsiasi elemento HTML, non solo sugli elementi AMP. Se indicato, l'elemento di fallback deve essere un figlio diretto dell'elemento AMP.

Esempio: funzionalità non supportata

Nell'esempio seguente, utilizziamo l'attributo fallback per comunicare all'utente che il browser non supporta una particolare funzionalità:

<amp-video controls
  width="640"
  height="360"
  src="/static/inline-examples/videos/kitten-playing.mp4"
  poster="/static/inline-examples/images/kitten-playing.png">
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

Esempio: fornitura di diversi formati di immagine

Nell'esempio seguente, utilizziamo l'attributo fallback per indicare al browser di utilizzare il file JPEG se il formato WebP non è supportato.

<amp-img
  alt="Mountains"
  width="550"
  height="368"
  layout="responsive"
  src="/static/inline-examples/images/mountains.webp"
>
  <amp-img
    alt="Mountains"
    fallback
    width="550"
    height="368"
    layout="responsive"
    src="/static/inline-examples/images/mountains.jpg"
  ></amp-img>
</amp-img>

Interazione di segnaposti e fallback

Per i componenti AMP che si basano su contenuti dinamici (ad es. amp-twitter, amp-list), l'interazione di fallback e segnaposto funziona come segue:

1. Visualizzazione del segnaposto durante il caricamento del contenuto.
2. Se il contenuto viene caricato correttamente, il segnaposto è nascosto e visualizzato il contenuto.
3. Se il contenuto non viene caricato:
   1. Se è presente un elemento di fallback, è visualizzato il fallback.
   2. Altrimenti, si continua a visualizzare il segnaposto.

Nascondere gli indicatori di caricamento

Molti elementi AMP sono autorizzati a mostrare un "indicatore di caricamento", che è un'animazione di base che mostra che l'elemento non è stato ancora completamente caricato. Gli elementi possono disattivare questo comportamento aggiungendo l'attributo noloading.

• Written by @pbakaus
  with contributions from @bpaduch