Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par vermine

0PARTAGES

2  0 
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
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.

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de transgohan
Expert éminent https://www.developpez.com
Le 22/08/2012 à 19:59
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.
2  0 
Avatar de wirenth
Membre averti https://www.developpez.com
Le 22/08/2012 à 16:37
9gag fonctionne déjà comme ça ^^
1  0 
Avatar de tontonnux
Membre expérimenté https://www.developpez.com
Le 23/08/2012 à 8:55
Citation Envoyé par le_chomeur Voir le message
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) ?
1  0 
Avatar de __Jeje__
Futur Membre du Club https://www.developpez.com
Le 23/08/2012 à 9:11
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
1  0 
Avatar de SpaceFrog
Rédacteur/Modérateur https://www.developpez.com
Le 24/08/2012 à 9:03
Ha voilà je me disais bien que ça me rappelait un truc ...

Lazy load

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