PHP ile Infinite Scroll Örneği

Bu yazıda PHP ile infinite scroll örneğini inceleyip kullanımını anlatacağım. Nedir bu infinite scroll derseniz, AJAX tekniğinin bize verdiği yüzlerce güzel özellikten sadece bir tanesi diyerek başlayabiliriz.

Web sitesindeki klasik sayfalama mantığının dışında kaydırma çubuğu ile pencerenin veya div kutusunun en alt kısmına geldiğimizde AJAX ile yeni içerikleri dinamik olarak veri tabanından çekip bize gösterilmesini sağlayan pratik, estetik ve bant genişliği dostu olan bir tekniktir.

Açıkçası sistemi sıfırdan ben yazmadım. İnternette bulduğum dökümanı daha anlaşılır şekilde düzenleyip sizlere hem kaynak kodu olarak hem de anlatımlı olarak sunuyorum.

Kodun en önemli kısmı aşağıdaki Javascript bölümüdür:

<script type="text/javascript">// <![CDATA[
	$(document).ready(function(){

		function lastPostFunc()
		{
			$('div#lastPostsLoader').html('<img src="bigLoader.gif">');
			$.post("indexajax.php?lastID="+$(".boxLatest:last").attr("id"),

			function(data){
				if (data != "") {
				$(".boxLatest:last").after("
<div class='newajax'>"+data+"</div>
");
				$(".newajax").hide().fadeIn("slow");
				}
				$('div#lastPostsLoader').empty();
			});
		};

		$(window).scroll(function(){
			if  ($(window).scrollTop() == $(document).height() - $(window).height()){
			   lastPostFunc();
			}
		});

	});

// ]]></script>

Kodun son kısmında önce kaydırma çubuğunun pencerenin sonuna gelip gelmediği anlaşılıyor ve buna göre lastPostFunc()
çağırılıyor. Sonrasında ise AJAX olmadan ilk yükleme esnasında while ile döndürülen içerikte boxLatest sınıfına sahip div’in id değeride veri tabanından gelen içeriğin id değeri bastırılıyor. Son div’in id değeri AJAX ile indexajax.php adresine POST ediliyor ve olaylar gelişiyor. 😮

Sunucunun hızına göre insanların ne olduğunu anlayabilmeleri için lastPostsLoader id’li div içerisinde gif animasyon gösteriliyor.

Veri tabanıyla beraber kodun tamamını buradan indirebilirsiniz.

One Reply to “PHP ile Infinite Scroll Örneği”

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir