加载图像和数据一起出现

时间：2015-12-09 08:59:02

标签： javascript php jquery pagination

这是问题所在：

This is the image which shows the problem

我想首先加载图片然后加载数据。

我使用JQuery加载正在工作但图像和数据一起显示的图像。

我也在图片中描述了它

这是我的代码：

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

2 个答案:

答案 0 :(得分：0)

从 jQuery 1.8 开始，.ajaxStart()和.ajaxStop()方法只应附加到document。

您应该浏览文档，它说这些全局方法.ajaxStart()和.ajaxStop()现在必须仅限于$(document)。

所以你需要这样做：

$(document).ready(function () {            
     $('#imgloader').hide();  // hide it initially
     $(document).ajaxStart(function () {
         $('#imgloader').show();
     })
     .ajaxStop(function () {
         $('#imgloader').hide();
     });
  });

另一个建议是用css隐藏元素会更好：

#imgloader{ display:none; }

然后你可以完全省略这一行$('#imgloader').hide(); // hide it initially。

答案 1 :(得分：0)

“从jQuery 1.9开始，jQuery全局Ajax事件的所有处理程序，包括那些添加了.ajaxStart（）方法的处理程序，都必须附加到文档中。”

$( document ).ajaxStart(function() {
  $(this).show();
});

来自https://api.jquery.com/ajaxStart/

所以你的代码就像：

<script>
  $(document).ready(function () {            
    $('#imgloader').hide()  // hide it initially
         $( document ).ajaxStart(function () {
             $(this).show();
         })
         $( document ).ajaxStop(function () {
             $(this).hide();
         });
  });
</script>
相关问题
最新问题