jQuery: infinite scroll

Un sistema oggi molto diffuso per caricare solo i dati strettamente necessari alla visualizzazione consiste nel caricare una parte dei dati al load della pagina e successivamente i dati che eventualmente saranno necessari.
Le chiamate successive possono essere associate al raggiungimento del bottom della pagina mediante scroll.
Questa soluzione verrà realizzata usando un comodo pludin di jQuery: infinite scroll
La prima questione come al solito consiste nell’importare le librerie necessarie:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>

Successivamente prepariamo l’html che formattiamo con una riga di css:

<style>
.box{ margin:10px; padding:10px; background-color:#EEE; border:1px solid #333; border-radius:10px; box-shadow:5px 5px 5px #666666;}
</style>
...
<div id="container">
<div><h1>Box 01</h1></div>
<div><h1>Box 02</h1></div>
<div><h1>Box 03</h1></div>
<div><h1>Box 04</h1></div>
<div><h1>Box 05</h1></div>
<div><h1>Box 06</h1></div>
<div><h1>Box 07</h1></div>
<div><h1>Box 08</h1></div>
<div><h1>Box 09</h1></div>
<div><h1>Box 10</h1></div>
<nav id="page-nav"><a href="data/2.html"></a></nav>
</div>

Da notare sicuramente il tag nav, non tanto perché fa parte di html5 quanto perché è  l’elemento che contiene l’informazione sulla prossima pagina da caricare ovvero la 2.html che sarà semplicemnte affta così:

<div><h1>Box 11</h1></div>
<div><h1>Box 12</h1></div>
<div><h1>Box 13</h1></div>
<div><h1>Box 14</h1></div>
<div><h1>Box 15</h1></div>
<div><h1>Box 16</h1></div>
<div><h1>Box 17</h1></div>
<div><h1>Box 18</h1></div>
<div><h1>Box 19</h1></div>
<div><h1>Box 20</h1></div>
<nav id="page-nav"><a href="data/3.html"></a></nav>

Quindi con identica struttura html e stesso sistema per la chiamata che, ovviamente, sarà ajax.

A questo punto inseriamo lo script che gestisce la chiamata:

$(function(){
var $container = $('#container');
$container.infinitescroll({
navSelector  : '#page-nav',
nextSelector : '#page-nav a',
itemSelector : '.box',
loading: {
finishedMsg: 'No more pages to load.',
img: ''
}
});
});

La cosa fondamentale è la corretta selezione dei selettori che contengono la risorsa da caricare, il resto lo fa la libreria.

Per completezza gli attributi relativi al loading contengono le istruzioni sulla visualizzazione mentre si carica e della fine delle richieste.

L’esempio