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>
