J’ai souvent vu défiler à l’infini, mais il appelle en fait un appel ajax vers la page suivante et l’affiche lorsque la fenêtre atteint un certain seuil.
J’ai affaire à du code HTML contenant 100 éléments li
légers déjà chargés sur la page, mais pour les besoins de l’interface utilisateur, nous souhaitons charger paresseux les divs au fur et à mesure de leur défilement au lieu de les afficher tous en même temps. La structure de base ressemble à ceci:
- one
- two
- three
- four
- five
- six
- seven
.... 100 times
Si quelqu’un pouvait me suggérer le moyen le plus simple de réaliser cette fonctionnalité jQuery.
Ok, finalement cela fonctionne comme indiqué dans ce JSFIDDLE
//initialize winHeight = $(window).height(); liHeight = $('li.element').height(); next = Math.ceil(winHeight / liHeight); ulLength = $('li.element').length; $('html, body').animate({ scrollTop: 0}, 0); //hide elements not in the view as the page load for the first time $('li.element').each(function () { if ($(this).offset().top > winHeight) { $(this).fadeOut(0); } }); //show elements on scroll $(window).scroll(function (event) { scrollPos = $(window).scrollTop(); if (scrollPos + winHeight == $(document).height()) { $('#li' + next).fadeIn(); next++; } });
* { padding:0; margin:0; } .container { padding:0; list-style-type:none; } li.element { height:100px; background-color:#BBB; border-bottom:1px dotted gray; font-size:3em; padding-top:10px; text-align:center; color:#444; text-shadow:#222 0 1px 1px; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- and so on till 100