Image loader in pagination

This is the problem Я создал страницу, которая получает переменную и обрабатывает ее и получает данные из базы данных. Выбранные данные разбиваются на страницы с помощью файла функции разбиения на страницы. Я хочу использовать загрузчик изображений, когда я нажимаю на странице 2, изображение загрузки должно появляться до тех пор, пока данные не будут отображаться, и как только данные будут отображаться, загрузочное изображение должно исчезнуть.Image loader in pagination

Вот мои файлы ...

<?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>

источник

2015-12-08 Ali

делает обновления страницы при нажатии дальше? – momouu

есть. на странице refresf и переходит на пейджер = 2 – Ali

Каков идентификатор вашей страницы или идентификатор ее div? – momouu

Добавить GIF дать ему идентификатор = '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>

Edit 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>

источник

2015-12-08 10:22:31 momouu

они должны идти в скрипте тега справа .... – Ali

не работает. изображение gif появляется и не исчезает – Ali

Вы включили id = 'imgloader' в свое изображение? – momouu

Image loader in pagination

ответ

Смежные вопросы