Load more data on page scroll Using php, Data source JSON - php

Question

i developed a deal and coupon site and my data source is JSON. and my json file is big around 4MB. i want to show first 30 data and after scroll load next 30. so please tell me how can i do this work using JSON.
here is my code:
<?php $json = file_get_contents('offers.json');
$json_decode = json_decode($json,true);
foreach($json_decode as $data){
?>
<div class="ad-box">
<div class="ad-category"><?php echo $data['category'];?></div>
<div class="ad-image"><img class="lazy" data-src="<?php echo $data['imageUrl'];?>" src="" width="150" height="140" border="0" alt="lazy Image"/></div>
<div class="ad-title"><?php echo $data['title'] . " : " . $data['description'];?></div>
<div class="ad-url">Goto Offer</div>
</div>
<?php }
?>

Answer 1

your Json array is unknow but:
Main page:
<div id="loadbox">
<?php
$json = file_get_contents('offers.json');
$json_decode = json_decode($json, true);
for ($i = 0; $i < 29; $i++):
$data = $json_decode[$i];
?>
<div class="ad-box">
<div class="ad-category"><?php echo $data['category']; ?></div>
<div class="ad-image"><img class="lazy" data-src="<?php echo $data['imageUrl']; ?>" src="" width="150" height="140" border="0" alt="lazy Image"/></div>
<div class="ad-title"><?php echo $data['title'] . " : " . $data['description']; ?></div>
<div class="ad-url">Goto Offer</div>
</div>
<?php
endfor;
?>
</div>
<script type="text/javascript">
var last = 30;
function getData(lst) {
$.get("loader.php", {'last': lst}, function (data) {
$("#loadbox").append(data);
last += 30 ;
});
}
$(function () {
$(window).scroll(function () {
buffer = 40 // # of pixels from bottom of scroll to fire your function. Can be 0
if ($("html").prop('scrollHeight') - $("html").scrollTop() <= $("html").height() + buffer) {
getDate(last);
}
});
});
</script>
in the main page you load first 30 records and active ajax on scroll end.
when one loader for ajax request:
<?php
$json = file_get_contents('offers.json');
$json_decode = json_decode($json, true);
$start = (int) $_GET['last'] ;
for ($i = $start ; $i < ($start+30) ; $i++):
$data = $json_decode[$i];
?>
<div class="ad-box">
<div class="ad-category"><?php echo $data['category']; ?></div>
<div class="ad-image"><img class="lazy" data-src="<?php echo $data['imageUrl']; ?>" src="" width="150" height="140" border="0" alt="lazy Image"/></div>
<div class="ad-title"><?php echo $data['title'] . " : " . $data['description']; ?></div>
<div class="ad-url">Goto Offer</div>
</div>
<?php
endfor;
?>