Adobewordpress gururla sunar : Preloader.js

Birçok takipçimizin YouTube’da kullanılan yükleniyor barının nasıl yapıldığını sorması üzerine sizlere özel bir plugin geliştirme gereği duyduk. Preloader ismini verdiğimiz bu jQuery eklentisi sayfanızın yüklenmesini hesaplayıp bu süre dahilinde dolan bir bar ve dönen bir spinner oluşturuyor.

Ayrıca isteğe bağlı olarak kırmızı, mavi, yeşil ve sarı gibi ana renklere bürünmekle kalmıyor, tercih edilirse yüklenme sırasında sitenizin üstünü siyah ve beyaz renkteki perdesiyle de örtüyor.

ÖRNEĞİ GÖRÜNTÜLE

Sayfanıza preloader.js ile yükleniyor barı ve spinner ekleyin.

Peki bu sistem nasıl çalışıyor? Öncelikle yapının jQuery tarafıyla başlayalım.

Web sitenize girildiği gibi preloader.js sitenizin body elemanı içerisine kendi elemanını ekliyor. Sonrasında sitenizin tamamı yüklenene kadar üst kısımda bir bar ve spinner yaratılıyor. Kullanıcının yanlış bir şeyi tıklama veya henüz yüklenmemiş içerikle etkileşim kurma gibi bir ihtimaline karşın isteğe bağlı olarak ekranın üstüne perde de atılıyor. Sonrasında sayfa yüklendiğinde tüm bu elemanlar tek tek yok oluyor ve tarayıcıdan siliniyor. Böylece sayfada en ufak bir yük bile oluşturmuyor.

Yapının kendisi CSS ve JavaScript kodlarından ibaret. Ek olarak minify edilmiş versiyonları da zip dosyasında geliyor.

jQuery ile çalışan bu yapı 1.0+ tüm versiyonları destekliyor. Ayrıca CSS kodlarının da cross-browser yazılması sayesinde birçok popüler tarayıcıda sorunsuz çalışıyor.

Nasıl çalışır? Siteme nasıl eklerim?

Yapmanız gereken şey çok basit. Web sayfanızın elemanı içerisine preloader’in CSS ve JS dosyalarını tanıtıyoruz. Sonrasında da sitenizin en altına yani elemanını kapattığınız yerde fonksiyonumuzu çağırıyoruz.

İşte örnek kullanım.








<script></script>
<script></script>




<script>
preloader();
</script>



Preloader.js’yi Yükle

Preloader’ı şimdi ücretsiz olarak yüklemek için aşağıdaki linki tıklayın.

http://www.adobewordpress.com/wp-content/uploads/files/preloader.zip

Kaynak : http://www.adobewordpress.com/preloader-js-ile-sayfalariniza-yukleniyor-bari