Как я делал бесконечный скроллинг на сайте [Мой алгоритм]⁠⁠

Спешу поделиться 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