Bu dersimizde scroll indikçe veri yüklemeyi göreceğiz.Bu günümüzde artık bir çok sitede var.En bilinenleri facebook veya twitter.
Mantığı şudur.Scroll oynarsa scroll boyutunu alıp en aşşağıdamı diye kontrol ederiz.En aşağıda ise ajaxla yeni veri çekip sayfaya koyarız.Kodlara geçelim.
indir : http://ustaderslik.com/dosya/scroll_indik%C3%A7e_veri_y%C3%BCklemek.rar
video :
Aşağıdaki örnek mysql alanlarını kendinize göre düzenleyin.
index.php
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
var id=$("#mesaj:eq(0)").attr("name")-5;//idi mesaj olanın sayfada en üsttekinin namesini aldık.Sebebi o veritabanındaki en son veri.
//yukardaki idle sürekli 5 azaltıp 5 veri çekecez taki kalmayana kadar.
$(window).scroll(function(){//sayfadaki scroll oynarsa
var scroll=$(this).scrollTop();//scrolun yükseklik konumunu al
var uzunluk=$(document).height()-$(this).height();//documentin scroll boyunu bulduk.Yaniiçerikten pencere boyutunu çıkardık
if(scroll==uzunluk){//scroll konumu bulduğumuz uzunluğa eşitse .Yani dökümanın sonuna vardıysa
$(".yuke").html("<img src='loading.gif' id='load' />");//loading.gif i koy
var s=$(this).scrollTop();//o anki scrolun konumunu al
$.post("mesaj.php",{"id":id},function(veri){//ajaxla mesaj php ye son id i at 5 veriyi çek
if(veri!="yok"){//veri varsa
$(".mesaj_ana").append(veri);//verileri mesaj_ana clasının sonuna koy
id-=5;//id i 5 azalt
$(this).scrollTop(s);
}else{
$(".yukle").html('<div id="yok">Veri kalmadi</div>');//veri yoksa veri yoku yaz
}
});
}
});
});
</script>
<style type="text/css">
#mesaj{height:200px;background:#ddd;color:#fff;margin-bottom:10px;font-size:30px;}
#mesaj2{height:200px;background:#999;color:#fff;margin-bottom:10px;font-size:30px;}
#yok{height:200px;background:red;color:#fff;margin-bottom:10px;font-size:30px;}
</style>
</head>
<body>
<div class="mesaj_ana">
<?php
$baglan=mysql_connect("localhost","root","");//mysql başlantısı
$veritabani=mysql_select_db("pdo",$baglan);
if($veritabani){
$cek=mysql_query("select * from mesajlar order by id desc limit 5");//son 5 veriyi çekiyoz
$say=mysql_num_rows($cek);
if($say>0){
while($al=mysql_fetch_array($cek)){
echo "<div id='mesaj' name='".$al["id"]."'>".$al["mesaj"]."</div>";//verileri tek tek ekrana basıyoz.
}
}
}
?>
</div>
<div class="yukle"></div>
</body>
</html>
mesaj.php
<?php
$id=$_POST["id"];//idi aldık
$baglan=mysql_connect("localhost","root","");//mysql bağlantısı
$veritabani=mysql_select_db("pdo",$baglan);
if($veritabani){
if($id>0){
$cek=mysql_query("select * from mesajlar order by id desc limit $id,5");//gelen idten sonraki 5 veriyi aldık
$say=mysql_num_rows($cek);
if($say>0){
while($al=mysql_fetch_array($cek)){
echo "<div id='mesaj2' name='".$al["id"]."'>".$al["mesaj"]."</div>";//verileri yaz
}
}else{
echo "yok";//veri yoksa yok yaz
}
}else{
echo "yok";//id küçükse gene yok yaz
}
}
?>