За підтримки:
Цифролаб - печать фото через интернет. Самые низкие цены в Украине гарантируем!
Best slam dunks video at SlamDunks.TV
Одного разу стикнувся із необхідністю зробити прелоадер для сайту. Прелоадер на цілу сторінку, а не лише зображень на сторінці. На всякий випадок нагадаю, що функцією прелоадера є показувати просту заставку або й взагалі чорну (білу) сторінку допоки весь контент сторінки не завантажиться повністю.
В інтернеті є багато прикладів прелоадерів для зображень. Хороших прикладів і класних прелоадерів зображень. Проте зовсім бракує повно-сторінкових прелоадерів. Ось знайденим одним з них сьогодні я з вами і поділюсь. Він простий у встановленні та використовує зовсім трішки JavaScript.
Перше - скопіюйте ось цей код між тегами <head> i </head>:
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function clearPreloadPage() { //DOM
if (document.getElementById){
document.getElementById('prepage').style.visibility='hidden';
}else{
if (document.layers){ //NS4
document.prepage.visibility = 'hidden';
}
else { //IE4
document.all.prepage.style.visibility = 'hidden';
}
}
}
// End -->
</SCRIPT>Друге - додайте до тега <body> ось такий код:
onLoad="clearPreloadPage();"Третій етап - одразу після тега <body> вставте ось такий div:
<div id="prepage" style="position:absolute;padding:50px 0 0 0;font-family:arial;font-size:16px;left:0px;top:0px;background-color:white;layer-background-color:white;height:100%;width:100%;position:fixed;z-index:9999;font-family: Georgia, serif;">
<table width="100%"><tr><td><img src="http://example.com/images/ajax-loader.gif" alt='Завантаження...' width='31' height='31' /></td></tr><tr><td>Завантаження ... Будь-ласка, зачекайте!</td></tr></table>
</div>Це прелоадер чудовий тим, що ви можете змінити стилі заставки, таким чином кастомізувавши її на свій смак. Крім того, як видно, у коді присутнє посилання на файл ajax-loader.gif. Це зображення я згенерував з допомогою сервісу ajaxload.info. Це дуже зручно, можна вибрати будь-який тип і колір!
Комусь треба обов'язково подякувати за цей чудовий, простий і ефективний скрипт. Але, нажаль, я не пам'ятаю посилання, де знайшов його. Тому дякую безмежним просторам інтернету. 🙂