نمی دونم این لودینگ چیه که همه دنبالشن برای سایتشون بگذارند به نظر من که چیز جالبی نیست با این حال :
برای شروع کد زیر را قبل از </head> اضافه کنید :
کد:
<script type="text/javascript">
function checkLoadComplete(){
if (typeof(loadComplete) == 'undefined') setTimeout(checkLoadComplete, 100);
else loadComplete();
}
</script>
بعد از اون <body> را به این صورت ویرایش کنید :
کد:
<body onload="checkLoadComplete();">
حالا این کدها را بلافاصله بعد از اون اضافه کنید :
کد:
<div id="shadow_layer" style="position:absolute; z-index:998; top:0px; left:0px; width:100%; height:100%">
<table cellpadding="0" cellspacing="0" width="100%" style="height:100%; width:100%"><tr><td width="100%" height="100%"></td></tr></table>
</div>
<script type="text/javascript">
with (document.getElementById('shadow_layer').style) {
var shadow_layer_timer = setInterval(function () {
document.getElementById('preload_layer').style.top = document.documentElement.scrollTop + 'px';
width = document.documentElement.scrollWidth + 'px';
height = document.documentElement.scrollHeight + 'px';
left = document.body.offsetLeft + 'px';
}, 50);
if (typeof(filter) != 'undefined') {
filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=shadow.png,sizingMethod='scale')";
document.styleSheets[0].addRule('img.trans', 'behavior: url("images\/pngbehavior.htc");');
document.styleSheets[0].addRule('.trans img', 'behavior: url("images\/pngbehavior.htc");');
} else {
backgroundImage = 'url(shadow.png)';
}
}
</script>
<div id="preload_layer" style="z-index:998; position:absolute; top:0px; left:0px; height:100%; width:100%;">
<table cellpadding="0" cellspacing="0" style="height: 100%; width: 100%;">
<tr>
<td align="center">
<div id="modal_layer">
در این قسمت تصاویر یا نوشته هایی که می خواهید در زمان لود شدن صفحه نمایش داده شود را قرار دهید
</div>
</td>
</tr>
</table>
</div>
پس از انجام این کار در آخر صفحه و قبل از </body> کد زیر را اضافه کنید :
کد:
<script type="text/javascript">
htmlLoaded = true;
</script>
90% از کار تموم شد
حالا فقط یک تصویر شفاف png در فتوشاپ ایجاد کنید و اون را با نام shadow.png ذخیره کنید و در کدهای بالا هرجا از این تصویر استفاده شده آدرسش را با جایی که این تصویر را آپلود کردید تنظیم کنید .
یک نمونه shadow.png برای شما ضمیمه کردم .
راستی من این کدها را مستقیما از وب سایت mihannic کپی پیست کردم اگه کارهایی که گفتم را کردید و جواب نداد یا احتمالا به مشکلی برخوردید یه نگاه به سورس این وب سایت بکنید ببینید کجا اشتباه کردید .
