加载图像和数据一起出现
This is the problem:
I want to load loading image first and then data.
I use JQuery for loading the image which is working but the image and data appear together.
I have also described it in the image
Here is my code:
<?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> ';
}
?>
</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>
As of jQuery 1.8, the .ajaxStart() and .ajaxStop() method should only be attached to document.
You should go through the docs, it says these global methods .ajaxStart() and .ajaxStop() now have to be bound on $(document) only.
So you need to do this:
$(document).ready(function () {
$('#imgloader').hide(); // hide it initially
$(document).ajaxStart(function () {
$('#imgloader').show();
})
.ajaxStop(function () {
$('#imgloader').hide();
});
});
Another suggestion is to hide the element with css would be better:
#imgloader{ display:none; }
then you can omit this line completely $('#imgloader').hide(); // hide it initially.
"As of jQuery 1.9, all the handlers for the jQuery global Ajax events, including those added with the .ajaxStart() method, must be attached to document."
$( document ).ajaxStart(function() {
$(this).show();
});
From https://api.jquery.com/ajaxStart/
So your code will be like:
<script>
$(document).ready(function () {
$('#imgloader').hide() // hide it initially
$( document ).ajaxStart(function () {
$(this).show();
})
$( document ).ajaxStop(function () {
$(this).hide();
});
});
</script>