Corsi on-line

Preload di immagini con jQuery

Sia su Mr.Webmaster che sul blog abbiamo parlato più volte di come effettuare il preload delle immagini nella cache del browser al fine di averle immediatamente disponibili (senza attendere i tempi di caricamento) al momento del bisogno.
In questo post vi propongo una nuova soluzione (tratta da questo post in lingua inglese) che utilizza la potenza di jQuery per svolgere il lavoro. Per prima cosa, ovviamente, dovete includere la libreria jQuery nel vostro documento HTML dopodichè andiamo ad inserire questo codice:

<script type="text/javascript">
(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)
</script>

una volta definita la funzione $.preLoadImages sarà possibile richiama passandole come parametro le URL delle immagini che si desidera memorizzare nella cache del browser:

<script type="text/javascript">
jQuery.preLoadImages("bottone.gif", "/percorso/foto.jpg");
</script>

Nota: se non si utilizza jQuery è possibile gestire il preload delle immagini anche mediante una semplice funzione Javascript che potete trovare in questo vecchio articolo di Luca Ruggiero.

Post correlati
  • Jekkil

    Salve,
    volevo sapere se questo script è asincrono o no, ovvero se rallenta il caricamento di una pagina.

    Mi spiego meglio: nell’vecchio articolo di Luca Ruggiero, alla fine viene detto che la pratica ha il difetto di rallentare il caricamento della pagina.

    Mi chiedevo quindi se anche questo script avesse lo stesso difetto.

    Il mio intento è quello di usarlo in una galleria di immagini, e se il preloading delle immagini rallenta il caricamento di tutta la pagina, allora è inutili.

    grazie mille!

  • Se intendi caricare le immagini prima di aver caricato la pagina sicuramente ne rallenterà il caricamento. E’ così per definizione e a questo non esiste una soluzione, solo workaround che dipendono dalla situazione. 

    Per quanto riguarda il funzionamento asincrono, penso tu possa decidere di chiamare la funzione di caricamento nel momento che ritieni più opportuno associandola ad un evento (come il click del mouse) e facendo partire solo allora il caricamento delle immagini.

I più letti del mese
Tematiche