If you have lots of data and displaying the whole data in one time is very costly. There comes to approach one is lazy loading and another is pagination.
Here we are going to discuss the lazy loading in PHP, MySQL and Ajax. In lazy loading user can keep scrolling and keep getting the data until the whole data completes. Just like we quora and facebook do, User keep scrolling and post keep coming.
Mysql QueryClick here to download demo code
|
1
2
3
4
5
6
|
CREATE TABLE IF NOT EXISTS `post` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) NOT NULL,
`image` varchar(150) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=247 ;
|
db.php
|
1
2
3
4
5
6
|
<?php
$con = new mysqli('localhost', 'root', '', 'demo');
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
?>
|
index.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<style>
.posts { height: 100%; overflow: auto; width: 100%; }
.loading { color: green; }
li {font-size:20px;}
#loading { display:none; color:green; font-size:20px; }
</style>
<div class="posts">
<ol id="results"></ol>
</div>
<span id="loading">Loading Please wait...</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
loadResults(0);
$('.posts').scroll(function() {
if($("#loading").css('display') == 'none') {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
var limitStart = $("#results li").length;
loadResults(limitStart);
}
}
});function loadResults(limitStart) {
$("#loading").show();
$.ajax({
url: "posts.php",
type: "post",
dataType: "json",
data: {
limitStart: limitStart
},
success: function(data) {
$.each(data, function(key, value) {
$("#results").append("<li id='"+key.id+"'>"+value.title+"<img src='"+value.image+"' width='200px' height='200px'></li>");
});
$("#loading").hide();
}
});
};
});
</script>
|
posts.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?php
require_once('db.php');
$limitStart = $_POST['limitStart'];
$limitCount = 10; // Set how much data you have to fetch on each request
if(isset($limitStart ) || !empty($limitStart)) {
$query = "SELECT id, title, image FROM post ORDER BY id limit $limitStart, $limitCount";
$result = mysqli_query($con, $query);
$res = array();
while($resultSet = mysqli_fetch_assoc($result)) {
$res[] = array('id'=>$resultSet['id'],'title'=>$resultSet['title'],'image'=>$resultSet['image']);
}
echo json_encode($res);
}
?>
|
More from my site
-
Dependent dropdown example in PHP, MySQL
-
Autocomplete in php ajax
-
Server side DataTable in PHP,MySQL and Ajax | DataTable in PHP and MySQL | DataTables Example – Server-side Processing with PHP | DataTables example – Server-side processing | Add column in DataTable in PHP
-
Ajax Request
-
Live Email Availability Checking using PHP, jQuery and Ajax
-
Add Remove input fields dynamically using jQuery and PHP
Nice one. This is good example for create a infinite page scroll using jquery. Its save lot of time. Good job and well explained.
Thanks.
e-x-c-e-l-l-e-n-t exceptional!! thanks