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 <head> elemanı içerisine preloader’in CSS ve JS dosyalarını tanıtıyoruz. Sonrasında da sitenizin en altına yani <body> elemanını kapattığınız yerde fonksiyonumuzu çağırıyoruz.
İşte örnek kullanım.
PHP Kod:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="preloader.css">
<!-- jQuery ve preloader.js'yi yükleyelim -->
<script src="jquery.js"></script>
<script src="preloader.js"></script>
<![endif]-->
</head>
<body>
<script>
preloader();
</script>
</body>
</html>
Preloader.js’yi Yükle
Preloader’ı şimdi ücretsiz olarak yüklemek için aşağıdaki butonu tıklayın.
Preloader’ı şimdi ücretsiz olarak yüklemek için aşağıdaki butonu tıklayın.