Basit jQuery Uygulamaları Yazıyoruz : Yükleniyor Resmi Göstermek
Merhaba Arkadaşlar,
Eğitim serimizin bu günkü makalesinde sayfaların ön yüzeyinde gördüğümüz ve genellikle bir yerinde ” Yükleniyor ” yazan veya bir resim ile belli edilen sayfa yükleme işlemlerinden bahsedeceğim. Bu işlemin yapılma nedeni ; genellikle bol resimli tasarımların yüklenmesi de zor olacağı için kullanıcının bu aşamaları görmesi yerine bir yükleme efektinin ardından tüm resimler tasarım yerli yerine oturduğunda sitenin açılmasıdır. Şimdi bizde bir uygulama oluşturacağız ve içerisine büyük boyutlu resimler yükleyip ardından bu tasarımı çalıştırarak yükleniyor efektimizin çalıştığını göreceğiz.
İlk olarak bir klasör oluşturuyoruz ve içerisine index.html isimli bir sayfa yaratıyoruz. Daha sonra ” www.jquery.com ” adresi içerisinde direkt olarak Anasayfa içerisinde bulunan ” Download ” butonuna tıklayarak son sürüm jQuery kütüphanesinin bulunduğu sayfayı açıyoruz ve ” Farklı Kaydet ” seçeneği ile oluşturduğumuz klasör içerisine kütüphaneyi ekliyoruz.
Şimdi html sayfamızı açıyoruz ve klasik anlamda sayfalarımızda kullandığımız HTML kodlarını yazıp jQuery kütüphanemizi de sayfamıza çekiyoruz. Kodlarımız şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulaması</title>
<script src="jquery-1.9.0.min.js"></script>
</head>
<body>
</body>
</html>
Şimdi yapacağımız uygulamanın basit anlamda mantığını kurmamız gerekmektedir. Biz sıfırdan bir tasarım yapmayacağımız için bir kaç büyük boyutlu resim koyacağız sayfamıza ve sonra da jQuery kodlarımızı yazarak bu sayfanın açılışını hep beraber göreceğiz.
Resimlerimizi ekrana yerleştiriyoruz. Kodlarımızın yeni hali şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulaması</title>
<script src="jquery-1.9.0.min.js"></script>
</head>
<body>
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</body>
</html>
Bu görüntüyü de aldıktan sonra son olarak indirme işlemi için sayfanın yüklenme efekti için bir gif resmi bularak klasör içerisine kaydedebilirsiniz.
HTML kodlarımız içerisine bir div yaratıyoruz. Bu div için de inline olarak CSS yazarak boyutlarının tam ekran olacağını , arka plan resminin ve renginin yollarını , z-index değerini , position değerini vererek hazır hale getiriyoruz. CSS yazılmış haldeki html kodlarımız şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulaması</title>
<script src="jquery-1.9.0.min.js"></script>
<style>
.page_loading {position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background: rgba( 255, 255, 255, .8 ) url('loading.gif') 50% 50% no-repeat;}
</style>
</head>
<body>
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<div class="page_loading"></div>
</body>
</html>
Sayfamızı bu şekildeyken çalıştırdığımızda sayfanın tamamının beyaz ve şeffaf olan bir renk ile kaplandığını ve seçtiğimiz gif resminin görüntülendiğini göreceğiz. jQuery kodlarımız ile bu sayfaya söylemek isteyeceğimiz cümle ” Penceredeki tüm nesneler yüklendiğinde loading efektinin display değerini none olarak değiştir ” olacaktır. Bunun da yazılı olduğu html sayfamızın görüntüsü şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulaması</title>
<script src="jquery-1.9.0.min.js"></script>
<style>
.page_loading {position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background: rgba( 255, 255, 255, .8 ) url('loading.gif') 50% 50% no-repeat;}
</style>
<script>
$(window).load(function(){
$('.page_loading').css({'display':'none'});
});
</script>
</head>
<body>
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<div class="page_loading"></div>
</body>
</html>
Site içerisindeki indirme linki içerisinde bir tek resimler olmayacaktır. Resim teminini kendiniz de yapabilirsiniz 🙂
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 35 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar