Kodları lütfen aşağıdaki butonları kullanarak renklendirin. Örnek: <php> echo "Selam Dünya"; </php>
Yardım
karakter kaldı

Sayfa Yükleniyor(Html preloader)...

Merhaba arkadaşlar, bir konuda js tecrübesi olan arkadaşlardan yardım bekliyorum. Konuyu açarsak durum şöyle: atıyorum elimde index.html adında bir sayfa var ve bu sayfanın içindede js dosyaları css dosyaları ve resim dosyaları gömülü. Ben istiyorumki sayfadaki bu dosyalar kullanıcının makinasına tamamen yüklenmeden sayfa gösterilmesin(css dosyası içindeki background dosyaları vb. dahil) ve bu süreçte yükleniyor tarzında bir yazı görüntülensin. Bu durumun js ile yapılabileceğini düşünmekteyim fakat jsden belirttiklerimi yapacak kadar anlamıyorum. Tecrübeli arkadaşların bu konuda fikir ve yardımlarını bekliyorum...
+0
-0
Cevaba KatılıyorumKatılmıyorum
Cevap Yaz Yorum Yaz Arşivime Ekle Takip Et

Doğru Cevap

  • uralozden adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    70 cevap - 0 soru
    Söylediğin tarzda birşeyi en basit yöntemi ile anlatayım. Öncelikle body'ne css'den bir loading gif'i background olarak atıyorsun sonra java script dosyana

    $(document).ready(function() {
    $('body').css("visibility","visible");
    $('body').css('background', 'url(images/bg.jpg) repeat-x #fff');

    });

    Browser özelliklerine göre değişir fakat öncelikle yazılar, resimler, cssler, ve java dosyaları en geç yüklenir bu yüzden resimlerin yazıların csslerin yüklenirken loading resmin görünecek ve en son java'ya geçtiğinde sayfanda background değşip siten açılacak.
    • huseyiniskender adlı üyenin fotoğrafı huseyiniskender
      Cevabınız için teşekkür ederim.
      10 yıl önce yazılmış

Cevaplar

  • GncArt adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    42 cevap - 13 soru
    Yukarıdaki cevap biraz basit olmuş. Daha ziyede bu tür preloading resimleri ajax ile işlem yapılırken kullanılır. İşlem isteği alındığında preloading gösterilir ve işlem bittiğinde resim kaldırılır. Onu da şu şekilde yapabilirsiniz..

    Sayfanıza jQuery kütüphanesini ekleyiniz.

    <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    


    Daha sonra HTML yi yazın:
    <div id="preloading"></div>
    <form>
    Adınız: <input type="text" name="ad">
    EMail: <input type="text" name="email">
    <input id="gonder" type="submit" value="Gönder">
    </form>
     


    Şimdide jQuery Ajax ile prelloading ve post işlemini yapalım:
    <script type="text/javascript">
    $(document).ready(function(){
        $('#gonder').click( ajaxgonder );
        
        function ajaxgonder(){
            var ad = $("input[name=ad]").val();
            var email = $("input[name=email]").val();
    
           // Preloading İşlemi
           $('#preloading').ajaxStart(function(){
                $(this).html('<img src="images/preloading.gif />"');
           });
    
           // Ajax Post İşlemi
           $.ajax({
                type: 'POST',
                data: "uyeadi="+ad+"&uyemail="+email,
                url: 'kayit.php',
               success: function(ajaxCevap){
                                      $('#preloading').hide('slow');
                                      if(ajaxCevap == "tamam"){  
                                            alert("Kayıt Başarılı...");
                                       }else{
                                            alert("Bir Hata Oldu...");
                                       }
               }
            });
        }
    });
    </script>
    


    Şimdide PHP kısmını yazalım:
    <?php
    $uyeadi = $_POST['uyeadi'];
    $uyemail= $_POST['uyemail'];
    
    $sql = mysql_query("INSERT INTO uyeler VALUES ('','ad','email')");
    
    if($sql){
    echo 'tamam';
    }
    ?>
    
    • huseyiniskender adlı üyenin fotoğrafı huseyiniskender
      Cevabınız için teşekkür ederim.
      10 yıl önce yazılmış
  • huseyiniskender adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    47 cevap - 20 soru
    Cevap yazma zahmetinde bulunan herkese teşekkür ederim. İstediğim durumu yapan kodları internetteki uzun arayışlarım sayesinde buldum. İe6 da dahil olmak üzere tüm tarayıcılarla uyumlu çalışıyor. Jquery ve benzeri bir js kütüphanesi dahil edilmediği için daha ufak boyutlu olduğundan hızlı işliyor. Tekrardan cevap yazan tüm paylaşımcı kişilere çok teşekkür ederim. Başkalarınında işine yarar düşüncesiyle kodları paylaşıyorum.

    Css kodları:
    html{overflow-x:hidden;overflow-y:auto;}
    html,body,#preloader{height:100%;}
    body > #preloader{height:auto;min-height:100%;}
    body{margin:0px; padding:0px;}
    #preloader{filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;position:absolute; left:0px; background:#000;z-index:99; top:0px; width:100%; height:100%;line-height:600px;color:#fff; text-align:center;}
    #yukleniyor{position:absolute;top:50%;left:50%;width:500px;height:100px;line-height:100px;margin-left:-250px;margin-top:-50px;font-size:18px;font-family:verdana;}
    


    js kodları:

    <js>
    function is_loaded() { //DOM
    if (document.getElementById){
    setTimeout("document.getElementById('preloader').style.visibility='hidden'",2000);
    }else{
    if (document.layers){ //NS4
    setTimeout("document.preloader.visibility = 'hidden'",2000);
    }
    else { //IE4
    setTimeout("document.all.preloader.style.visibility = 'hidden'",2000);
    }
    }
    }
    </js>

    html kısmında body tagı şöyle:

    <body onload="is_loaded();">

    html kısmı ise şöyle:

    <div id="preloader"> <center> <div id="yukleniyor">Sayfa Yükleniyor...</div></center> </div>


    Kodların derli toplu hali ise şöyle:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Yükleyici</title>
    <style type="text/css" media="screen">
    html{overflow-x:hidden;overflow-y:auto;}
    html,body,#preloader{height:100%;}
    body > #preloader{height:auto;min-height:100%;}
    body{margin:0px; padding:0px;}
    #preloader{filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;position:absolute; left:0px; background:#000;z-index:99; top:0px; width:100%; height:100%;line-height:600px;color:#fff; text-align:center;}
    #yukleniyor{position:absolute;top:50%;left:50%;width:500px;height:100px;line-height:100px;margin-left:-250px;margin-top:-50px;font-size:18px;font-family:verdana;}
    </style>
    <script type="text/javascript" language="javascript">
    function is_loaded() { //DOM
    if (document.getElementById){
    setTimeout("document.getElementById('preloader').style.visibility='hidden'",2000);
    }else{
    if (document.layers){ //NS4
    setTimeout("document.preloader.visibility = 'hidden'",2000);
    }
    else { //IE4
    setTimeout("document.all.preloader.style.visibility = 'hidden'",2000);
    }
    }
    }
    </script>
    <body onload="is_loaded();">
    <div id="preloader"> <center> <div id="yukleniyor">Sayfa Yükleniyor...</div></center> </div>

    Normal sayfa içeriği bu kısma gelecek...

    </body>
    </html>



    Bu kodları kişisel siteme uyguladım bakmak isteyen arkadaşlar için: http://www.huseyiniskender.com
  • NazimYilmaz adlı üyenin fotoğrafı
    7 yıl önce yazılmış
    4 cevap - 0 soru
    jquery ile de yapmak gayet basit arkadaşlar. buyrun burada anlatmıştım;

    http://blog.nazimyilmaz.com.tr/websitelerinize-jquery-ile-page-loading-efekti-ekleyin/