根据条件更改加载更多按钮值

Question

Hi I am using load more button to load content of the next page on the same web page. It can display unlimited no of results on the same page. Here is the code:

HTML:

<div class="wrapper">
    $results = $mysqli->prepare("SELECT id, name, message FROM paginate ORDER BY id DESC LIMIT ?, ?");
    $results->bind_param("dd", $position, $item_per_page);
    $results->execute(); //Execute prepared Query
    $results->bind_result($id, $name, $message);

    while($results->fetch()){ //fetch values
        echo '<li>'.$id.') <strong>'.$name.'</strong> : '.$message.'</li>';
    }
    <ul id="results"></ul>
    <div align="center">
    <button id="load_more_button"><img src="ajax-loader.gif"  class="animation_image" style="float:left;"> Load More</button> <!-- load button -->
    </div>
</div>

Jquery var track_page = 1;

    $("#load_more_button").click(function (e) {
        track_page++;
        load_contents(track_page);
    });

    function load_contents(track_page){
        $('.animation_image').show();       
        $.post( 'fetch_pages.php', {'page': track_page}, function(data){
           if(data.trim().length == 0){
                $("#load_more_button").text("No more records!").prop("disabled", true);
            }

            $("#results").append(data);

            $('.animation_image').hide();
        });
    }
</script>

fetch_pages.php

<?php
include("config.inc.php");
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
if(!is_numeric($page_number)){
    header('HTTP/1.1 500 Invalid page number!');
    exit();
}
$position = (($page_number-1) * $item_per_page);
$results = $mysqli->prepare("SELECT id, name, message FROM paginate ORDER BY id DESC LIMIT ?, ?");
$results->bind_param("dd", $position, $item_per_page);
$results->execute();
$results->bind_result($id, $name, $message);


while($results->fetch()){
    echo '<li>'.$id.') <strong>'.$name.'</strong> : '.$message.'</li>';
}

What i want to do is to change Load More button value accordingly ?

1. If there are no results then display NO RESULTS ! in load more button.
2. If there are less than 6 results then first display LOADING DATA in load more button until the data loads and then display END OF RESULTS ! in load more button.
3. AND if there are more then 5 results then first display LOADING DATA and then display LOAD MORE after that.

Here is what i have tried so far and as a result it becomes more confusing for visitors as it display END OF RESULTS! until data loads.

    <?php
        if((results)<5){
    ?>
            <div align="center" class="load-more-b">
                <button id="load_more_button">END OF RESULTS !</button>
            </div>
    <?php
        }else{
    ?>
            <div align="center" class="load-more-b">
                <button id="load_more_button"><img src="ajax-loader.gif"  class="animation_image" style="float:left;">&nbsp;&nbsp;LOAD MORE</button> 
            </div>
    <?php
        }
    ?>

I know i need to make changes in jquery code to achieve this, but i don't have enough knowledge about jquery. So please Any help is appreciated. Thanks.

EDIT: Now i am displaying my first page without AJAX call and to display second page and so on i am using AJAX call. Now the problem is, If there are more than 5 results, It displays LOAD MORE button with GIF image. But i want only LOAD MORE button without GIF And when user click on that button then GIF image to be displayed until the next results load. Thanks... Its working very well for me. But my problem is when i use this script it takes 2-3 seconds to load data. And during these 2-3 seconds Load More displays on the screen.