Tam Ekran CSS/DHTML Preloader
Loading ...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...
<html>
<head>
<title>Preloader</title>
<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=“text/css”>
<!–
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>
</head>
<body onUnload=“hideLoadLayer();”>
<!–Loading Layers –>
<div id=“loadingLayer”>
<div id=“loadingMessage”>LOADING!!!!</div>
</div>
<!–END Loading Layers –>
<script>
positionLoadLayer();
</script>
</body>
</html>
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">
satırını eklerseniz sorun düzelecektir.
Benzer Yazılar
Eğer yazıyı beğendiyseniz ya da ekleyecekleriniz varsa, lütfen yorumunuz yazın veya RSS aboneliği ile yeni yazılardan anında haberdar olun.
Ö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