Javascript Girl
  1. Javascript Girl
  3. JQuery scroll show hidden content
Intereting Posts
JavaScript – Comment puis-je m'assurer qu'un jQuery est chargé? Comment l'instruction «utilisation stricte» est-elle interprétée dans Node.js? Possible problème jQuery / jqGrid dans IE8 Comment faire un appel API en utilisant un météore Serialize le contenu de la toile pour ArrayBuffer et désérialiser à nouveau Ajuster un ensemble d'objets contenant des valeurs clés Jasmine a-t-il besoin de sinon.js? Utilisation de jQuery / javascript Comment vérifier si le fichier JS (SP.JS) est déjà appelé dans une page? Affecter une variable dans l'état condition, bonne pratique ou non? Comment puis-je utiliser les valeurs de Razor dans une fonction javascript? Convertir la valeur de couleur RVB en RGBA à 0,75 alpha PHP json_encode et fonctions javascript Faire pivoter le polygone autour du point dans la carte de la feuille Mise à jour de la série Highchart en javascript Comment agrandir une image en HTML en cliquant dessus

JQuery scroll show hidden content

Comment puis-je que, par défaut, 6 éléments div soient affichés sur la page, et lorsqu'un utilisateur se déplace au bas de la page, six autres sont chargés?

Si vous voyez cet exemple , il existe plusieurs divs. Je veux que seulement 6 d'entre eux soient affichés initialement, et chaque fois que l'utilisateur arrive au bas de la page, je veux que six autres soient chargés, jusqu'à ce que vous "épuisiez" les divs.

Jusqu'à présent, j'ai essayé d'expérimenter les plugins de défilement infinis jQuery, mais ils ne sont pas applicables dans mon cas, car en fait, le nombre d'éléments que j'ai est très fini!

Comment cela peut-il être réalisé en utilisant jQuery? Merci d'avance!

MODIFIER

Je crois que l'on pourrait régler le reste des divs à caché (à part le premier 6), et déclencher une fonction qui en charge six plus lorsque le bas de la page est atteint.

J'ai créé un exemple très rapide, il n'est pas optimisé par le travail:

http://jsfiddle.net/gRzPF/2/

Vous devriez pouvoir utiliser quelque chose comme suit: 

jQuery( window ).scroll( function( ) { var loadHeight = jQuery( document ).height( ) - jQuery( window ).height( ); if( haveDivsToLoad && jQuery( window ).scrollTop( ) >= loadHeight ) { // fire your load function here } } );

Vous devrez peut-être jouer avec loadHeight pour que cela fonctionne à votre loadHeight satisfaction.

EDIT: J'ai ajouté haveDivsToLoad au contrôle. Vous devriez en faire une variable globale (ou fermeture) et la définir comme true ou false selon qu'il y ait plus de div s à charger.

Supposons que vous avez un tableau de divs initialisé avec document.createElement("div") ou similaire. Supposons que vous en avez un grand nombre. 

 var myArrayOfDivs = [];//see above var DivsAdded = 6;//as stated, 6 were already added - index 6 is the 7th element $(window).scroll(function () { if ($(window).scrollTop() == $(document).height() - $(window).height()) { for(int i = 0; i < 6; i++){ if( myArrayOfDivs.length < DivsAdded ) break; $("#elementToAppendIn").append(myArrayOfDivs[DivsAdded++]); } } });

Après un peu d'expérimentation, j'ai trouvé la réponse parfaite:

http://jsfiddle.net/jackdent/gRzPF/12/