Una delle parti più frequentemente utilizzato nello sviluppo è lo slider, soprattutto nella homepage del nostro sito. Questo componente rende subito l’idea dei contenuti che andremo a trattare all’interno del sito.
In questo articolo utilizzeremo come esempio uno dei plugin jQuery più conosciuto ovvero FlexSlider, ma questa regola si può applicare a tutti i componenti slider, personalmente consiglio Swiper.
Quando si sviluppa uno slider di fotografie, con una larghezza full-width oppure anche in box ad un div container, può capitare che durante il caricamento vediamo il contenuto successivo allo slider (solitamente un testo) nella posizione che dovrebbe occupare quest’ultimo. Cioè non viene applicata l’altezza della nostra foto al div dello slider. Succede perché la prima immagine non è stata ancora caricata e quindi il browser non conosce ancora la sua altezza.
Per ovviare a questo problema possiamo ricorrere ad un piccolo trucco nel file CSS che calcola tramite una proporzione il padding in percentuale da utilizzare come segnaposto in attesa che venga caricata la foto.
In poche parole assegnamo un’altezza in percentuale al contenitore dell’immagine che verrà caricata nel nostro slider.
Ad esempio utilizzando in questo caso flex-slider abbiamo questo HTML.
<div class="flexslider">
<ul class="slides">
<li><img src="slide1.jpg" alt="" /></li>
<li><img src="slide2.jpg" alt="" /></li>
<li><img src="slide3.jpg" alt="" /></li>
</ul>
</div>Mentre il codice CSS che bisognerà aggiungere alla classe è quello che segue.
.flexslider{
/*
Padding Bottom = (Image Height / Image Width) * 100%
Esempio: 800 / 2000 * 100 = 40
*/
height: 0;
padding-bottom: 40%;
}Ovviamente a seconda delle dimensioni della foto cambia la percentuale in base alla proporzione scritta sopra nel commento del codice o che trovate qui sotto. Viene usata la percentuale al posta dell’altezza in px per far funzionare questa regola anche in caso di ridimensionamento nei dispositivi mobile (responsive).
Padding Bottom = (Image Height / Image Width) * 100%
Importante è anche ricordarsi di impostare l’altezza a 0 questo per il fatto che viene sostituita dal padding e quindi in questo caso l’altezza è il padding.
Height = 0
Ho utilizzato questo snippet in diversi siti e principalmente per sistemare il problema in slider a larghezza piena. Questo però non esclude che si possa utilizzare per banner con immagini in background o per altre necessità legate ad esempio a foto caricate in lazy load (personalmente utilizzo questo trick anche per immagini caricate con l’utilissimo plugin jQuery Lazy).
Fare o non fare. Non esiste provare.
Andrea Benzi 