Jquery İle Sayfa Ön Yükleyici (Page PreLoader)Yapımı

jquery sayfa ön yükleme

Sitenize giren kullanıcılar için sayfa yüklenene kadar ekranda bir animasyon gösterebilirsiniz..
bu özelliğe ingilizcede Page PreLoader denir yani sayfa önyükleme çoğu sitede görmüşsünüzdür.
bizde bu yazımızda nasıl yapılacağından bahsedeceğiz..

Page PreLoader Sayfa Ön Yükleme Nasıl Yapılır

bir tane loader class'ına sahip div oluşturuyoruz..

<div class="loader"></div>

şimdi bu divimizi sayfamızın ortasında çıkıcak şekilde ayarlıyoruz ve arkplana css de bir resim ekliyoruz..

.load {

   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:100%;
   z-index: 999;
   background: url(preload.gif) center no-repeat #fff;
 
}

Son olarak jquery kodlarımızı yazıyoruz yalnız dikkat edin jquery çalışabilmesi için kütüphanesini sayfanıza dahil etmeniz gerekir. burda yaptığımız işlem ise jquery'nin load özelliği sayesinde sayfa yüklendiğinde gif resmimiz gözükücek ve fadeOut fonksiyonu ile yavaşca kaybolucak..


$(window).on("load",function() { 

   $(".load").fadeOut("slow");

})

işlem bukadar basittir isterseniz sayfaya bitanede resim ekleyerek ön yüklemenin düzgün çalışıp çalışmadığı kontrol edebilirsiniz. gif kaybolduktan sonra resmin çıkacağını görüceksiniz..

proje dosyasını burdan indirebilirsiniz. PreLoad indir

demo linki : proje demo gösterim

Bu siteden'de farklı örneklere ve hazır gif resimlerine ulaşabailirsiniz Preload kaynak


Yorumlar

Bu blogdaki popüler yayınlar

Youtube İçin Abone Ol Animasyonu yapmak