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

Le , par vermine, Responsable JavaScript & AJAX
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.
L'article sur DailyJS.
Les sources et la documentation sur GitHub.


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de le_chomeur le_chomeur - Expert confirmé http://www.developpez.com
le 22/08/2012 à 20:45
bof pas terrible la démo :-/
Avatar de tontonnux tontonnux - Membre expérimenté http://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) ?
Avatar de __Jeje__ __Jeje__ - Futur Membre du Club http://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/infinite-scroll.html

Par contre je ne sait pas si ca fonctionne sur les "vieux" navigateurs
Avatar de SpaceFrog SpaceFrog - Rédacteur/Modérateur http://www.developpez.com
le 23/08/2012 à 9:17
Il me semble que j'au déja croisé un autre plugin du genre qui ne charge le contenu que lors du scroll ...
Avatar de vermine vermine - Responsable JavaScript & AJAX http://www.developpez.com
le 23/08/2012 à 9:37
Citation Envoyé par tontonnux  Voir le message
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.
Avatar de v.charlet v.charlet - Membre averti http://www.developpez.com
le 23/08/2012 à 10:15
Pour les noobs, il existe des tutos un peu plus détaillé que le GetStarted ?
Avatar de tontonnux tontonnux - Membre expérimenté http://www.developpez.com
le 24/08/2012 à 8:41
Citation Envoyé par vermine  Voir le message
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.
Avatar de SpaceFrog SpaceFrog - Rédacteur/Modérateur http://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
Avatar de alex_vino alex_vino - Membre émérite http://www.developpez.com
le 24/08/2012 à 10:00
Citation Envoyé par SpaceFrog  Voir le message
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.
Avatar de psychadelic psychadelic - Membre chevronné http://www.developpez.com
le 24/08/2012 à 12:27
Miracle, JQuery à découvert la gestion des tables circulaires !
Avatar de le_chomeur le_chomeur - Expert confirmé http://www.developpez.com
le 27/08/2012 à 10:19
Citation Envoyé par tontonnux  Voir le message
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) ?


il s'agit ici de boucle infini des données , hors facebook une fois atteint sa limite stop le load des publications suivantes cela est assez simple à mettre en place et de nombreux plugin jquery et autre pour d'autres librairies existent...

Mon commentaire peu constructif je l'admet vient d'une démo qui est très lourde et ne montre pas correctement l’efficacité de la fonction proposée ...
Offres d'emploi IT
Développeur freelance, poo, php5, html5, javascript natif, jquery
Webstock - Ile de France - Paris (75009)
INGENIEUR DEVELOPPEUR JAVASCRIPT, HTML5, GOOGLE AP
ENERGYENCE SA - Suisse - Lausanne
Ingénieur d'études javascript h/f
CTS Consulting - Midi Pyrénées - Toulouse (31000)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -