IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

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


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Expert éminent

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Par défaut Infinity.js : le plugin jQuery pour le défilement infini de longues listes
    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.

  2. #2
    Membre actif
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Février 2005
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Février 2005
    Messages : 22
    Par défaut
    La site de démo est kitch à souhait!
    En tout cas, c le genre de plugin qui peut être utile!

  3. #3
    Membre Expert
    Avatar de transgohan
    Homme Profil pro
    Développeur Temps réel Embarqué
    Inscrit en
    Janvier 2011
    Messages
    3 149
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Temps réel Embarqué

    Informations forums :
    Inscription : Janvier 2011
    Messages : 3 149
    Par défaut
    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.

  4. #4
    Membre extrêmement actif

    Homme Profil pro
    Software Developer
    Inscrit en
    Mars 2008
    Messages
    1 470
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Software Developer

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 470
    Par défaut
    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.

  5. #5
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2011
    Messages
    74
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2011
    Messages : 74
    Par défaut
    9gag fonctionne déjà comme ça ^^

  6. #6
    Membre émérite
    Avatar de dkmix
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    619
    Détails du profil
    Informations personnelles :
    Localisation : Jamaïque

    Informations forums :
    Inscription : Septembre 2007
    Messages : 619
    Par défaut
    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

  7. #7
    Membre extrêmement actif

    Homme Profil pro
    Software Developer
    Inscrit en
    Mars 2008
    Messages
    1 470
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Software Developer

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 470
    Par défaut
    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?

  8. #8
    Membre émérite
    Avatar de dkmix
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    619
    Détails du profil
    Informations personnelles :
    Localisation : Jamaïque

    Informations forums :
    Inscription : Septembre 2007
    Messages : 619
    Par défaut
    je suis sous chrome 21 (21.0.1180.83) et ça marche ! ??

  9. #9
    Membre extrêmement actif

    Homme Profil pro
    Software Developer
    Inscrit en
    Mars 2008
    Messages
    1 470
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Software Developer

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 470
    Par défaut
    Citation Envoyé par dkmix Voir le message
    je suis sous chrome 21 (21.0.1180.83) et ça marche ! ??
    Chrome 21.0.1180.79 m

  10. #10
    Futur Membre du Club
    Profil pro
    Inscrit en
    Avril 2008
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2008
    Messages : 4
    Par défaut Alernative (avec jQuery)
    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

  11. #11
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Il me semble que j'au déja croisé un autre plugin du genre qui ne charge le contenu que lors du scroll ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  12. #12
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    Miracle, JQuery à découvert la gestion des tables circulaires !

Discussions similaires

  1. Réponses: 0
    Dernier message: 19/09/2012, 08h07
  2. Réponses: 5
    Dernier message: 07/09/2012, 18h19
  3. plugin jQuery pour League of Legend
    Par momox19 dans le forum jQuery
    Réponses: 1
    Dernier message: 10/06/2011, 16h46
  4. Réponses: 2
    Dernier message: 02/06/2010, 10h23
  5. Réponses: 0
    Dernier message: 03/09/2009, 21h53

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo