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.

Popülerlik: 5%