Discussion :

[vermine]

Infinity.js
le plugin jQuery pour le défilement infini de longues listes

Infinity.js est un plugin jQuery permettant d'obtenir un défilement rapide et stable pour les longues listes d'éléments. Il s'inspire du fonctionnement du composant UITableView d'iOS. Cette technique permet de faire apparaitre automatiquement la suite de la liste lorsque l'on fait défiler la page vers le bas.
Le plugin est conçu par les développeurs de Airbnb et est sous la licence BSD.


Il est simple d'utilisation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var $el = $('#my-infinite-container');
var listView = new infinity.ListView($el);
 
// ... Quand on ajoute un nouveau contenu :
 
var $newContent = $('<p>Hello World</p>');
listView.append($newContent);
 
// ... Lorsqu'on supprime un élément :
 
var listItems = listView.find('.my-items');
for(var index = 0, length = listItems.length; index < length; index++) {
   listItems[index].remove();
}

Plusieurs améliorations de performances sont actuellement prévues, y compris celle de modifier le tableau interne ListItem pour utiliser un arbre binaire autorégulateur.

Démo.
D'après un article sur DailyJS.
Les sources et la documentation sur GitHub.

[ranouf]

La site de démo est kitch à souhait!
En tout cas, c le genre de plugin qui peut être utile!

[transgohan]

Dommage qu'il ne supporte que les navigateurs récents.
Sur un FF 3.6 (pas tapez, j'ai pas le choix au boulot ) le plugin ne sert strictement à rien puisque tout est chargé en une fois.
J'ai d'ailleurs planté mon navigateur en attendant qu'il charge le tout et j'étais arrivé à un point où la barre de défilement était limite invisible (en exagérant un peu ).

Bref belle boucle infinie pour moi ce défilement infini.
Je testerai ce soir avec un navigateur à jour.

[alex_vino]

Je n'ai pas trop bien compris comment ca fonctionne (ou ca ne fonctionne pas chez moi sous Chrome).
Le contenu doit se charger au fur et a mesure que l'on défile, a la facon de Facebook ou Google Images, est-ce bien cela?
Si oui, ma scrollbar est toute miniscule au chargement car tout le contenu est déja chargé, hors la scrollbar devrait plutot diminuer au défilement.

[wirenth]

9gag fonctionne déjà comme ça ^^

[dkmix]

Si oui, ma scrollbar est toute miniscule au chargement car tout le contenu est déja chargé, hors la scrollbar devrait plutot diminuer au défilement.

Non non si tu va en bas ca continue et la scrollbar remonte un peu

[alex_vino]

Ah ok donc Infinity.js ne marche pas non plus sur mon Google Chrome qui est pourtant a jour.
Dommage

Connaitriez-vous des alternatives compatibles au moins avec IE8?

[dkmix]

je suis sous chrome 21 (21.0.1180.83) et ça marche ! ??

[alex_vino]

je suis sous chrome 21 (21.0.1180.83) et ça marche ! ??

Chrome 21.0.1180.79 m

[__Jeje__]

Il y a aussi jQuery Masonry qui fait la même chose :
http://masonry.desandro.com/

Une démo ici : http://masonry.desandro.com/demos/infinite-scroll.html

Par contre je ne sait pas si ca fonctionne sur les "vieux" navigateurs

[SpaceFrog]

Il me semble que j'au déja croisé un autre plugin du genre qui ne charge le contenu que lors du scroll ...

[psychadelic]

Miracle, JQuery à découvert la gestion des tables circulaires !