Developpez.com - Rubrique JavaScript

Le Club des Développeurs et IT Pro

Infinity.js :

Le plugin jQuery pour le défilement infini de longues listes

Le 2012-08-22 14:16:31, par vermine, Expert éminent sénior
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 : 
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.
  Discussion forum
20 commentaires
  • transgohan
    Expert éminent
    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 22/08/2012 à 19:59
  • wirenth
    Membre averti
    9gag fonctionne déjà comme ça ^^
    le 22/08/2012 à 16:37
  • tontonnux
    Membre expérimenté
    Envoyé par le_chomeur
    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) ?
    le 23/08/2012 à 8:55
  • __Jeje__
    Futur Membre du Club
    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/in...te-scroll.html

    Par contre je ne sait pas si ca fonctionne sur les "vieux" navigateurs
    le 23/08/2012 à 9:11
  • SpaceFrog
    Rédacteur/Modérateur
    Ha voilà je me disais bien que ça me rappelait un truc ...

    Lazy load

    http://www.appelsiini.net/projects/lazyload
    le 24/08/2012 à 9:03
  • ranouf
    Membre à l'essai
    La site de démo est kitch à souhait!
    En tout cas, c le genre de plugin qui peut être utile!
    le 22/08/2012 à 15:23
  • transgohan
    Expert éminent
    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.
    le 22/08/2012 à 15:51
  • alex_vino
    Membre émérite
    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.
    le 22/08/2012 à 16:25
  • dkmix
    Membre éprouvé
    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
    le 22/08/2012 à 17:09
  • alex_vino
    Membre émérite
    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?
    le 22/08/2012 à 17:31
  Poster une réponse