Öncelike basit olara sayfa yuklenene kadar sadece bir loading ikonu -.gif hozukmesi için css html ve java script ile yapılması gerekenler
CSS
<style type="text/css">
#dvLoading
{
background: url(images/bx_loader.gif) #fff no-repeat center center;
height: 700px;
width: 100%;
position: fixed;
z-index: 1000;
}
</style>
HTML
<body>
<div id="dvLoading"></div>
Javascript
window.onload = function(){ document.getElementById("loading").style.display = "none" }
Yeni başlayanlar için kod biraz yabncı gelebilşr fakat javascript normalde gozukur yani display:block yada visible olan bir div i sayfa yuklendiğinde görünmez yapıyor bahsettipimiz div de loading gif ini içeren div imiz.
Bu konuda farklı çözümler bulabilirsinşz ama jquery kullanmadan yapılacak en basit yollardan biri budur.
Biraz daha karmaşık olan durumlarda size ait spesifik durumlarda mesela loading arayüzünün bir ajax çağrısı yaptığınızda-herhangi bir işlem yaptıgınızda -gözükmesini istiyorsanız şu kodu da yazabilirsiniz
html ve css aynı javascript de şu şekilde bir değişiklik yapılıyor öncelikle gösterme ve gizleme işlemlerini iki ayrı fonksiyon yapıyorum.
function goster(){ document.getElementById("loading").style.display = "block" }
function gizle(){ document.getElementById("loading").style.display = "none" }
yapacagım iş örnek olarak bir butona basıldıgında tetiklensin-başlasın.Bu kısım html .
<button onclick="tetikle()" value="testet"/>
<script>
function tetikle(){
goster();
Yapılacak iş yazılır -mesela bir web sayfasnı yükleme vb.
gizle();
}
</script>
Basitleştirirsek işlem başlamadan goster fonksiyonu ile loading div ini visible daha sonra ise gizle() fonksiyonu ile invisible yaptım
Eğer jquery kullanıyorsanız
$("#loading").show();
$("#saydanınyukleecegiTag").load(myurl, function() {
$("#loading").hide();
});Son ihtimalde jquery mobile kullanımı burda ise işler epeyce bir kolaylaşmış jqmobile de şu kullanım yeterli oluyor
//Loading div ini göster
$.mobile.pageLoading();
//Loading div ini gizle
$.mobile.pageLoading( true );
Hiç yorum yok:
Yorum Gönder