Jan.01

Tam Ekran CSS/DHTML Preloader

Sitenizin sayfa yüklenmelerinde Yükleniyor şeklinde tam ekran ve site yükleninceye kadar arka plandaki link vb. elementlere tıklanmasını engelleyen bir ön yükleme sayfası ister misiniz ? Baya bir araştırıp yaptığım elemelerde aşağıdaki kodu buldum. Buyrun bakalım.

Örnek : http://www.avrasyaprefabrik.com
yada Plesk Control Panel deki sayfa geçişleri…

head tagları arasına aşağıdaki kodları eklemeniz yeterlidir.

<script>
function positionLoadLayer()
{
        var documentWidth = screen.width;
        var documentHeight = screen.height;
        var scrollBarWidth = 18;
        var loadingLayer = document.getElementById("loadingLayer");
        var loadingMessage = document.getElementById("loadingMessage");
        loadingLayer.style.width = documentWidth - scrollBarWidth + "px";
        loadingLayer.style.height = documentHeight - scrollBarWidth + "px";
        loadingMessage.style.top  = (documentHeight / 2)  - (loadingMessage.offsetHeight / 2)+"px";
        loadingMessage.style.left = ( documentWidth / 2) -  (loadingMessage.offsetWidth / 2)+ "px";
}
function hideLoadLayer()
{
        layer = document.getElementById("loadingLayer")
        layer.style.visibility = "hidden";
}
function startUp()
{
        positionLoadLayer();   
        hideLoadLayer();
}
</script>
<style type="&ldquo;text/css&rdquo;">
<!–
table { background:#cc9999;}
#loadingmessage {
        position:absolute;
        left:0px;
        top:0px;
        width:226px;
        height:85px;
        z-index:100;
        background:#000099;
}
#loadinglayer {
        position:absolute;
        left:0px;
        top:0px;
        width:226px;
        height:85px;
        z-index:99;
        filter:alpha(opacity=70);
        opacity: 0.7;
        -moz-opacity:0.7;
        background:#666666;
}
body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
}
–>
</style>
        <!–Loading Layers –>
        <DIV id=“loadingLayer”>
            <DIV id=“loadingMessage”>LOADING!!!!</DIV>
        </DIV>
        <!–END Loading Layers –>
        <script>
        positionLoadLayer();
        </script>

Sitenizde flash animasyonlar varsa büyük ihtimalle bu layerların üstünde kalıcaktır. Bu durumda flash animasyonun parametrelerine

<param name="wmode" value="transparent">

Kodunu eklemeniz yeterlidir.

Internet
Share this Story:
  • facebook
  • twitter
  • gplus

About Muzaffer Ali AKYIL

Merhabalar, Adım Muzaffer Akyıl, Bilgi teknolojileri ile içli dışlı, teknolojiyi yakından takip eden, web ve masaüstü programlama ile uğraşıp, saatlerce kastığı şeyleri hiç bir karşılık beklemeden paylaşmayı amaç eden biriyim.


Yorumlar(2)

  1. Hakan
    3301 days önce

    Öncelikle tşk ederim fakat ben kodu çalıştıramadım

    çalışan bir örneği varsa atabilirmisiniz.

    sadece tek saftada html olarak

    kolay gelsin iyi çalışmalar

  2. prefabrik
    3253 days önce

    gercekten cok basarılı olmuş elinize sağlık paylaşım için.

Bir yorum bırak

 

Comment