jQuery : Автоматическая загрузка контента при прокрутке
Некоторые веб-сайты, такие как Twitter используют бесконечную прокрутку страницы. Это означает, что все содержимое динамически загружается на одной странице до тех пор, как вы прокручиваете вниз.
Некоторые веб-сайты, такие как Twitter используют бесконечную прокрутку страницы. Это означает, что все содержимое динамически загружается на одной странице до тех пор, как вы прокручиваете вниз.
Сначала HTML-разметка:
<div id="loadingbar" style="display:none;position:fixed;bottom:0;left:0;right:0;background-color:#000;color:#FFF;text-align:center;"><b><i>Загрузка следующих 50...</i></b></div> <!-- Скрытое поле с количеством загружаемых строк --> <input type="hidden" value='50' id="loaded_max" /> <!-- --> LINE #0: Просто какой-то текст.<br/> ... LINE #50: Просто какой-то текст.<br/><br>
Теперь, сам фрагмент который подгружает строки из файла load.php в количестве, указанном в скрытом поле.
$(document).ready(function() { $('#loaded_max').val(50); }); var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if(loading == false){ loading = true; $('#loadingbar').css("display","block"); $.get("load.php?start="+$('#loaded_max').val(), function(loaded){ $('body').append(loaded); $('#loaded_max').val(parseInt($('#loaded_max').val())+50); $('#loadingbar').css("display","none"); loading = false; }); } } });
И исходный код файла load.php который генерирует строки с текстом.
<?php $_GET['start'] = preg_replace('~[^0-9]~','',$_GET['start']); // simple force num for($i=intval($_GET['start']);$i<=($_GET['start']+50);$i++){ echo 'LINE #'.$i.': Просто какой-то текст.<br/>'; } ?>