Caricamento condizionale delle immagini con breakpoints.js

In modo analogo a quanto visto nelle lezioni precedenti, carichiamo dinamicamente anche le immagini della sezione 'Altri video'.

Questa volta ci appoggiamo ad una libreria, breakpoints.js, basata su jQuery. Trovate il codice incluso nel file 'librerie-polyfill.js' all'interno della cartella '/assets/libs/'.

Come funziona breakpoints.js

Una volta collegata al documento, la libreria svolge due funzionalità:

1. aggiunge all'elemento body una classe corrispondente ai breakpoint che definiamo quando si inizializza lo script;
2. crea ed esegue degli eventi personalizzati che scattano quando ci si trova nel contesto di uno specifico breakpoint.

Molto più facile far parlare il codice. Ecco una piccola demo.

Abbiamo collegato alla pagina jQuery e breakpoints.js:

<script src="jquery.min.js"></script>
<script src="breakpoints.js"></script>

Abbiamo poi definito i breakpoint:

$(window).setBreakpoints({
  distinct: true,
  breakpoints: [1, 600]
});

Sono distinti. 600 corrisponde a 600px, riferiti alla larghezza della finestra. Quando la larghezza è >= 600px entriamo dunque nel breakpoint indicato come 600; quando la larghezza è < 600px, usciamo dal breakpoint 600 ed entriamo nel breakpoint indicato come 1.

Per finire, agganciamo (bind) all'elemento $(window) (la finestra del browser) gli eventi personalizzati di breakpoints.js, che sono nella forma enterBreakpointbreakpoint-definito e exitBreakpointbreakpoint-definito. Nel nostro caso ciò si traduce in: quando entri nel breakpoint 600 fai comparire questo alert, quando esci dal breakpoint 600 mostra quest'altro alert:

$(window).bind('enterBreakpoint600', function () {
  alert('Entro nei 600px');
});
$(window).bind('exitBreakpoint600', function () {
  alert('Esco dai 600px');
});

Da queste poche note si comprende come questa libreria sia un ottimo modo per eseguire codice Javascript in base alla larghezza della finestra e ai breakpoint che definiamo. Ma è anche evidente come, a differenza della soluzione adottata nella lezione 3, si debbano impostare breakpoint anche in Javascript e non solo nei CSS.

Applicazione nel progetto

Sulla nostra home page, dicevamo, usiamo la libreria nella sezione 'Altri video'. Nel codice HTML ritroviamo l'identico scenario visto nella sezione 'Primo piano', con l'unica differenza che qui usiamo come riferimento non un titolo h3 ma un paragrafo nel contesto del quale andiamo a inserire il riferimento all'immagine:

<p class="didascalia conditional-img" data-src="newyork-1.jpg">

Lo script è così configurato:

$(window).setBreakpoints({
  distinct: true,
  breakpoints: [1, 600]
});
$(window).bind('enterBreakpoint600', function () {
  var imgVideo = $("p.conditional-img");
  $(imgVideo).each(function (index, element) {
    var el = $(element);
    $('').attr('src', el.attr('data-src')).attr('class', 'scala media--block').insertBefore(el);
  });
});

Non ci soffermiamo ad analizzare nei dettagli il codice. Qui si è utilizzata jQuery e il codice appare più compatto e semplificato, ma i passaggi sono identici a quelli già visti nella precedente lezione.