Ładowanie kolejnych elementów z bazy danych ~ Infinite Scroll

To dość złożone pytanie. Zanim spróbujesz zakodować własną odmianę od zera, sugeruję przyjrzenie się Infinite Scroll jQuery Plugin . Jeśli to nie rozwiąże problemu, oto możliwe rozwiązanie:

Skrypt JavaScript

$(document).ready(function () {
    loadData( 0 );
    //Hide Loader for Infinite Scroll
    $('div.ajaxloader').hide();

});

function loadData ( last_id ) {
    var $entries = $('#entries'),
        $loader = $('.ajaxloader', $entries).show();
    $.get( '/getentries.php', { last_id : last_id }, function( data ) {
        $entries.append( data ).append( $loader.hide() );
        filterEntries();
    });
};


//Isotope filter - no changes to this code so I didn't include it

$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        $('div.ajaxloader').show('slow');
        loadData( $( '#entries item:last' ).data('id') )
    }
});

PHP

<?php
//Connect to Database
$con = new mysqli( 'localhost', 'root', 'root', 'awards' );
if( $con->connect_errno ) {
    die( 'Could not connect:' . $con->connect_error );
}

$last_id = isset( $_GET['last_id'] ) ? (int)$_GET['last_id'] : 0; 
$stmt = $con->prepare( 'SELECT * FROM entry WHERE status = "registered" AND entry_id > (?) ORDER BY entry_id LIMIT 0, 30' );
$stmt->bind_param( 'i', $last_id );
$stmt->execute();

$result = $stmt->get_result();    
while( $row = $result->fetch_assoc() ) {
    //Get award cat ids
    $awardcat = $row['awards_subcategory_id'];

    print "<div class='item item$awardcat clearfix' data-id='" . $row['entry_id'] . "'>";//add award cat id to each div
    print '<img class="image" src="http://localhost:8888/awardsite/wp-content/themes/award/placeholder.jpg" />';
    print "<p > Studio: " . $row['studio'] . "</p>";
    print "<p class='client'> Client: " . $row['client'] . "</p>";
    print "<p class='description'> Description: " . $row['description'] . "</p>";
    print "<p class='solutionprocess'> Solution Process: " . $row['solution_process'] . "</p>";
    print "</div>";

}
$con->close();

Kod JavaScript wysyła żądanie AJAX GET do skryptu php z identyfikatorem ostatniego wpisu wyświetlanego na liście. Skrypt PHP zwraca następnie 30 wpisów, które pojawiają się po tym identyfikatorze. Oryginalny plik JavaScript zawierał trochę kodu PHP. Usunąłem to, ponieważ nie wiem, jaki jest jego cel (może wyprowadzasz JS ze skryptu PHP?). Ponadto całe XMLHttpRequest kod można skrócić do $.get() funkcjonować. I tak używasz jQuery, więc nie musisz wymyślać koła na nowo. Użyłem data-id atrybut do przesyłania identyfikatorów wpisów. To jest atrybut specyficzny dla HTML5. Jeśli nie chcesz go używać, po prostu użyj id zamiast tego pamiętaj, że identyfikatory nie mogą zaczynać się od cyfry – należy poprzedzić je literą.

W skrypcie PHP użyłem mysqli zamiast mysql_* Funkcje. Powinieneś użyć mysqli lub PDO od teraz, ponieważ są bardziej niezawodne i bezpieczne niż (teraz przestarzałe) mysql_* . Twoja instalacja PHP najprawdopodobniej zawiera już te rozszerzenia. Zauważ, że nie obsługiwałem błędów w zapytaniach do bazy danych. Możesz sam napisać ten kod. Jeśli pojawią się inne rodzaje błędów, opublikuj je tutaj, a postaram się je naprawić.