Gerçek Zamanlı Preloading

Bir çok web sayfasına giriş yaparken sayfanın yüklenmesi esnasında karşınıza çeşitli tasarımlarda hazırlanmış yükleniyor sayfası görmüşsünüzdür.

Front-end geliştirme yapan arkadaşlar bu konudan bihaber değillerdir ancak kimi sayfalarda fake preloading çalışmaları gördüm. Yani şu yapılıyor: sayfanın browserda yüklenmesi durumu kontrol edilmeden belirlenen bir süre boyunca preloading ekranı gösteriliyor. Bu yöntem yanlış mı? Değil tabiki, ancak bu işin doğru yöntemi varken neden kaçak yöntemle amatör bir iş yapılsın ki?

Şimdi gerçek zamanlı preloading sayfasının yapılma mantığını kısaca şöyle anlatayım:

• Tasarımını zevkinize göre yaptığınız preloading sayfasını ilk olarak ziyaretçinin karşısına getiriyoruz
• Javascript ile browser'ın sayfayı yüklemede ne aşamada olduğunu kontrol ederek (readyState), complete durumunda preloading sayfasını gizliyoruz.

Çok basit ve kısa bir yöntem. Hemen html, css ve javascript kodlarımıza geçiyoruz.

Öncelikle preloading ekranı için bir div tag'ı yazıp içerisine beğendiğiniz bir spinner gif'i, svg'si yerleştirelim. Konuyu hızlı bir şekilde anlatmak için ben, SpinKit üzerinden bir spinner seçtim. Bu spinner konusu hayal gücünüze kalmış arkadaşlar.

<div id="preLoading">
	<!-- Spinner | Start -->
	<div class="sk-cube-grid">
  		<div class="sk-cube sk-cube1"></div>
  		<div class="sk-cube sk-cube2"></div>
  		<div class="sk-cube sk-cube3"></div>
  		<div class="sk-cube sk-cube4"></div>
  		<div class="sk-cube sk-cube5"></div>
  		<div class="sk-cube sk-cube6"></div>
  		<div class="sk-cube sk-cube7"></div>
  		<div class="sk-cube sk-cube8"></div>
  		<div class="sk-cube sk-cube9"></div>
	</div>
	<!-- Spinner | End -->
	
</div>

Id'si “preLoading” div etiketini body tag'ından hemen sonra yerleştirebilirsiniz. HTML kodlarıyla işimiz bitti. 

preLoading div etiketimizin sayfanın tamamını kaplamasını istiyoruz ki arka planda imajların yüklenmesi veya cdn olarak kullanılan pluginlerin çeşitli sebeplerle yüklenmesi sırasında kademeli yüklenmeyi ziyaretçiye göstermeyelim.

div#preLoading{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color:#333 ;
  display: flex;
  align-items: center;
}

CSS kodumuz ile preLoading div'imizin position özelliğine absolute değerini atadık ve sayfanın tamamını kaplaması için left, top, width ve hight değerini belirledik. Şu haliyle sayfayı açarsanız arkaplanına #333 renk kodu atanmış koyu gri bir sayfa göreceksiniz. Sayfanın yüklenmesi bitinceye kadar bu ekran ziyaretçiye gösterilecek. 

Seçtiğimiz spinner için css kodlarında değişiklik yapabilir veya istediğiniz/beğendiğiniz farklı bir spinner kullanabilirsiniz. Kullandığım spinner'a ait css kodlarını codepen de bulabilirsiniz.

Şimdi gelelim son aşamaya. Sayfamıza istek gönderildi ve ziyaretçinin karşısına direk preLoading  ekranı geldil. Bundan sonra bu ekranı gizleyen javascript kodumuz ekte sunulmuştur :)

document.addEventListener('readystatechange',function(){
	if(document.readyState=='complete'){
		document.getElementById('preLoading').style.display = 'none';
	}
});

Kodu açıklayacak olursam eğer: browser'ın document nesnesinin “readystatechange” özelliğini olay dinleyici ile dinliyoruz ve readyState özelliğinin sayfanın yüklendiğini bildiren “complete” değeri döndürmesi sonucu “preLoading” div'imizi gizliyoruz. 

See the Pen preLoading by Vehbi PEKPAK (@vehbycom) on CodePen.

Konu bu kadar arkadaşlar. Blog yazısı yazmak gerçekten kolay değilmiş. İçerisinde bulunduğum işlerde karşılaştığım sorunların çözümlerini veya yeni öğrendiğim gelişmeleri hem kendime not defteri olması açısından hem bu alanda araştırma yapan geliştiriciler için elimden geldiğince yazmaya çalışacağım.

Bu konu hakkında fikirlerinizi paylaşırsanız sevinirim. Sizin farklı yöntemleriniz varsa öğrenmeyi çok isterim.  
Zaman ayırdığınız için teşekkürler.