Merhaba arkadaşlar,

Bildiğiniz gibi youtube arayüzünde bir takım değişikliklere gitti ve ilk olarak sayfa değişmeden, url ve mevcut sayfanın içeriğini değiştirerek videoların mevcut sayfada yüklenmesini sağladı.

jQuery ile sayfa değiştirmeden içeriği değiştirmek dökümanımdan bu işlemin nasıl yapıldığını öğrenebilirsiniz.

Şimdi ise bahsedeceğimiz kısım, youtube'un kullanmış olduğu sayfa yükleniyor sistemi.

Dikkat ettiyseniz youtube'da sayfa yüklenirken browserın yükleniyor kısmı aktif olmayıp, adres çubuğunun hemen altında kırmızı bir şerit çalışıyor ve sayfa yükleniyor.

Biz bunu kendi web sitemize uyarlayacağız.

Öncelikle benim bahsedeceğim ve chrome kullanmıyorsanız web sitemde de görebileceğiniz eklentinin ismi NProgress. NProgress sayesinde kendi istediğimiz şekilde bir loading barı oluşturabiliyoruz.

Dilerseniz ilgili javascript kütüphanesine buradan erişebilirsiniz.

Buradan kendi resmi dökümanlarına erişebileceğiniz gibi örnekleri de görebilirsiniz.

Kullanımı ise oldukça basit.

Herhangi bir linke tıklandığında
NProgress.start()


şeklinde çalıştırıp, yüklenme tamamlandığında
NProgress.done()


şeklinde kullanmanız yeterli.

jQuery ile sayfa değiştirmeden içeriği değiştirmek dökümanımdaki sayfa değiştirmeden load etme kısmını kullanıyorsanız (ki efektif olması açısından kullanmalısınız) kodu aşağıdaki gibi modifiye edip bu eklentiye de sahip olabilirsiniz;



$(function(){

	$("a[rel='load']").click(function(e){

		NProgress.start();

		pageurl = $(this).attr('href');

		$.ajax({url:pageurl,success: function(data){

			$('body').html(data).find("body").html();

		}});

		

		if(pageurl!=window.location){

			window.history.pushState({path:pageurl},'',pageurl);	

		}

		NProgress.done();

		return false;  

	});

});

$(window).bind('popstate', function() {

	$.ajax({url:location.pathname,success: function(data){

		$('body').html(data).find("body").html();

	}});

});


Not: kodu bu şekilde değiştirdikten sonra script kısmına indirip ftp ye atmış olduğunuz NProgress eklentisinin css ve js dosyalarını da eklemeniz gerekmektedir.

Takıldığınız kısımda yorumlardan sorarsanız konu hakkında yardımcı olmaya çalışırım.
Dökümanı PDF olarak download etmek için tıklayınız.