Спешу поделиться 1 из множества способов сделать бесконечный скроллинг на вашем сайте.
Для новостного паблика нужно было сделать сайта. Было решено что отображать новости будем в ленте как в известных нам соцсетях. Начал думать как бы всё это дело реализовать. Всё что нашел в интернете было по алгоритму: берем все посты засовываем в массив и отображаем по штук и увеличиваем с прокруткой. Сразу скажу, уверен на 100% что кто-то делал лучше, но всё же мой алгоритм проще. Было решено делать по своему.
Принцип таков:
При прокрутке прогружаем только 5 новостей прямо из базы, при этом ускоряя загрузку сайта, и как только юзер докрутит ленту до конца загружаем ещё 5 штук.
Теперь разберем код:
Блок в который грузим новости
id="content"
Далее в index подключим js файл из папки js
js/smartLenta.j
Теперь о самом алгоритме:
var limitos=6; # Глобальная переменная, в ней определяем предел загрузки
function LoadNews(limit){
$.ajax({
url: "ajax/newsloader.php" # Аjax запрос, о нём позже
type : "POST",
data : {
limpost: limit # Передаем по данным только лимит
},
cache: false,
success: function(html){
$("#content").append(html); # Загрузка в блок
}});}
$(document).ready(function(){
var screenHeight = $(window).height(); # Задаем высоту экрана
LoadNews(limitos);
});
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) { # Событие прокрутки
window.limitos+=5; # +5 к пределу
LoadNews(window.limitos); # И вызываем ф-цию
}
});
А теперь сам ajax
include '../config/connect.php'; # Конфигурация с подключением к БД
$limpost = $_POST["limpost"]; # Получаем данные
$flim=$limpost-5; # Первая грань
$start=mysql_query("SELECT * FROM news ORDER BY time DESC LIMIT $flim, $limpost");
while ($news=mysql_fetch_array($start)){
# Данные
echo $news["anonce"];
}
Вот собственно и всё, вы можете скачать этот код: https://github.com/AlexDorkus/SmartTape
