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

[transgohan]

Retesté ce soir avec mon ordinateur personnel (FF à jour).
Je retire ce que j'ai dis sur FF3.6, il y a de forte chances que ça fonctionne aussi. C'est juste que le DOM initial est tellement monstrueux qu'il doit pas s'en sortir...

Car j'ai du charger deux fois la démo ce soir pour comprendre vraiment ce qu'apportait la librairie.
Ils auraient du le faire avec un nombre initial plus petit.

[le_chomeur]

bof pas terrible la démo :-/

[tontonnux]

bof pas terrible la démo :-/

On est ici entre personnes avec certaines compétences, mais pourtant certains on mal vu le fonctionnement.

Donc je suis d'accord : la démo n'atteint pas son but.
Elle est trop lourde et beaucoup trop chargée dans sa forme. Un simple Lorem Ipsum aurait bien mieux remplit son office.

Sinon, sur la fonctionnalité en elle-même, c'est quelque chose qu'on nous demande de plus en plus (on nous dit "à la Facebook") et c'est donc intéressant d'avoir la possibilité d'utiliser un plugin jQuery.

Mais quelqu'un connaitrait-il un équivalent sans jQuery (voir pour mootools) ?

[__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 ...

[vermine]

Mais quelqu'un connaitrait-il un équivalent sans jQuery (voir pour mootools) ?

Pour MooTools, je ne sais pas trop. Il y a ce travail-ci mais il date un peu et n'est pas tout à fait au point.

Sinon il y a ceci avec Ruby on Rails et MooTools.

Il existe également une version MooMasonry mais le concept est un peu différent.

Bref, on peut trouver deux-trois trucs mais je n'ai pas connaissance d'un plugin stable, finalisé et récent.

[v.charlet]

Pour les noobs, il existe des tutos un peu plus détaillé que le GetStarted ?

[tontonnux]

Pour MooTools, je ne sais pas trop. Il y a ce travail-ci mais il date un peu et n'est pas tout à fait au point.

Sinon il y a ceci avec Ruby on Rails et MooTools.

Il existe également une version MooMasonry mais le concept est un peu différent.

Bref, on peut trouver deux-trois trucs mais je n'ai pas connaissance d'un plugin stable, finalisé et récent.

Merci j'irai jeter un oeil.

[SpaceFrog]

Ha voilà je me disais bien que ça me rappelait un truc ...

Lazy load

http://www.appelsiini.net/projects/lazyload

[alex_vino]

Ha voilà je me disais bien que ça me rappelait un truc ...

Lazy load

http://www.appelsiini.net/projects/lazyload

Oui moi aussi
Corrige moi si je me trompe, mais jQuery.LazyLoad est juste pour les images.

[psychadelic]

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