分页中的图像加载程序 - Image loader in pagination

这就是我创建的一个页面的问题，该页面获取变量并对其进行处理，然后从数据库中获取数据。提取的数据由分页函数文件进行分页。当我点击第2页时，我想使用图像加载程序，加载图像应该出现，直到显示数据，一旦显示数据，加载图像就会消失。

这是我的文件。。。

   <?php
session_start();
if (isset($_GET["topic_name"]))
{   
    $_SESSION['topic_name']=$_GET["topic_name"];
    $topicget = $_SESSION['topic_name'];
}
else
{
$topicget = 'Age';
}
//get the function
include_once('dbconnect.php');
include_once ('function.php');
   $page = (int) (!isset($_GET["page"]) ? 1 : $_GET["page"]);
    $limit = 15;
    $startpoint = ($page * $limit) - $limit;

    //to make pagination
    $statement = "`topic`,`author`,`quote` WHERE  ( quote.topics REGEXP '[[:<:]]{$topicget}[[:>:]]' and topic.topic_en= '{$topicget}')and quote.author_id=author.id";
    $query = mysqli_query($con,"SELECT * FROM {$statement} LIMIT {$startpoint} , {$limit}");
     if($query === FALSE) { 
     die(mysqli_error($con)); // TODO: better error handling
                         }

    ?>
   <html>
   <head>
  <title>Pixster Quotes</title>
  <link href="files/core_msnry.css" media="screen, print" type="text/css" rel="stylesheet">
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link href="files/pagination.css" rel="stylesheet" type="text/css" />
  <link href="files/grey.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="files/footer-distributed-with-address-and-phones.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
 <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script>
 $(document).ready(function (){
  $("#imgloader").hide(); //will hide the gif
    $("#masonry").ajaxStart(function(){
            $("#imgloader").show(); //when pagination is clicked, loader will show
              })
            $("#masonry").ajaxStop(function () {
     $('#imgloader').hide();
  });
  });
  </script>

  <style>
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
   }
  .item {
    position: absolute;
    margin:10px;
    margin-top:40px;
    margin-left:0px;
    margin-right:10px!important;
    width:  300px;
    height: auto;
    float: left;
    background: #ffff;
    font-size:20px !important;
    text-align:center;
    display: block;
    line-height: 1.42857143;
   -webkit-box-shadow: 0px 0px 15px -9px rgba(28,27,28,1);
   -moz-box-shadow: 0px 0px 15px -9px rgba(28,27,28,1);
    box-shadow: 0px 0px 15px -9px rgba(28,27,28,1);
    -webkit-filter: grayscale(00%);
    -moz-filter: grayscale(00%);
    -o-filter: grayscale(00%);
    -webkit-transition: all 0.1s ease; 
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
     transition: all 0.1s ease;
     }
      .item:hover {
      -webkit-box-shadow: 0px 0px 29px -12px rgba(0,0,0,0.85);
      -moz-box-shadow: 0px 0px 29px -12px rgba(0,0,0,0.85);
       box-shadow: 0px 0px 29px -12px rgba(0,0,0,0.85);
       -webkit-transform: scale(1.005);
       -moz-transform: scale(1.005);
       -ms-transform: scale(1.005);
       -o-transform: scale(1.005);
        transform: scale(1.005);
      }
     .char a{
     color:white;
     }
    #masonry{
   height:auto; !important;
            }
    #imgloader{
    margin:100px;
              }

   </style>
   </head>
   <body>
   <!--header-->
   <div style="height: 40px;" class="sticky-wrapper" id="bq-tn-id-sticky-wrapper">
   <nav style="" id="bq-tn-id" class="bq-tnav navbar navbar-default bq-cookie-notice ng-scope" data-ng-controller="NavBarCtrl">
   <div class="cl">
   <div class="navbar-header">

   <a class="brand" style="padding:0px 5px 0px 5px; color:white" href="#/"><span class="bqDesktopLogo"></span></a>
   </div>
  <div class="collapse data-ng-cloak navbar-collapse" data-ng-class="navBarClass()" data-ng-click="navCollapsed=true">
  <ul class="nav navbar-nav">
  <li class="bq-ni hidden-xs bq-nav-large" id="sl-bq-nav-home-t"><a href="http://localhost/quotes/" class="txnav">Home</a></li>
  <li class="bq-ni"><a href="char.php" class="txnav">Authors</a></li>
  <li class="bq-ni"><a href="topic.php" class="txnav">Topics</a></li>
  </ul>
  <ul class="nav data-ng-cloak navbar-nav navbar-right">
  <li>
  <form action="search.php" method="GET" class="navbar-form navbar-left bq-nav-large no-border bq-no-print navbar-left form-search ng-pristine ng-valid" style="padding-left:8px;margin-top:5px">
  <div class="form-group bq-search">
  <input class="s-btn fa-input fa fa-search" value=" " type="submit">
  <input id="bq-search-input" placeholder="search" maxlength="80" name="q" class="s-fld-t input-medium search-query s-small" type="text">
  </div>
  </form>
  </li>

  </ul>
  </div> 
  </div> 
  </nav></div>
  <!--header ends-->


 <div class="letter-navbar qs-blk" style="text-align: center; letter-spacing: 2px">
 <span class="body bq-tn-letters"> <span id="bq-auth-lbl" class="bq-tn-wrap">Authors:</span>
 <span class="char">
 <?php
 $chars = range('a', 'z');
 foreach($chars as $eachChar){
    echo '<a href="char.php?authchar='.$eachChar.'">'.strtoupper($eachChar).'</a>&nbsp;&nbsp;';
                              }
 ?>
 </span>
 </span>
 </div>
  <center><img id="imgloader" src='../quotes/img/loading.gif'/></center>
 <div id='masonry'>

    <center> <h1><strong><?php echo $topicget; echo "  related Quotes";?></strong></h1></center>

   <?php
  $Authorname='';
  $quote='';
  $tag='';
  $NothingFound=true;
  $count=1;
  while ($row = mysqli_fetch_assoc($query)) {
        $NothingFound=false;
        $quote =$row['quote'];
        $Authorname =$row['name'];
        $tag =$row['topic_en'];
         ?>
         <div class="item">
     <?php echo $quote; ?><br>
     <?php echo "Author:- {$Authorname}";?>
      </div>
     <?php      $count++;
            }?>
   <?php if($NothingFound){?>
   <div class="item">
     <?php echo "NOTHING FOUND";?>

    </div>
    <?php } ?>
        </div>

    <script src='masonry.pkgd.min.js'></script>
    <script>
    var container = document.querySelector('#masonry');
    var masonry = new Masonry(container, {
    columnWidth: 50,
    itemSelector: '.item'
     });
     </script>

  <?php echo pagination($statement,$limit,$page);?> 
 <div style="margin-top:20px>"<?php include('footer.php');?></div>
  </body>
  </html>

添加一个gif，赋予它一个id="imgloader"。

<script>
$(document).ready({
      $("#imgloader").hide(); //will hide the gif
        $("#masonry").click(function(){
                $("#imgloader").show(); //when pagination is clicked, loader will show
                $("#masonry").hide();// to hide your mess data
        });
});
</script>

编辑1

<script>
 $(document).ready(function (){
    $("#imgloader").hide(); //will hide the gif
    $("#masonry").ajaxStart(function(){
            $("#imgloader").show(); //loader will show 
            $("#masonry").hide();// to hide your mess data
    });
    $("#masonry").ajaxStop(function () {
            $('#imgloader').hide();// loader will hide
            $("#masonry").show();// to show your mess data
    });
  });
  </script>