Показване на картинка при зареждане
19-05-2011
Здравейте!

Като за начало, трябва да си намерим подходящо изображение (loader). Най-често срещаните са AJAX loader-ите. Ето няколко сайта, от които можем да си направим такива изображения, по свой вкус:
www.ajaxload.info
www.preloaders.net
www.loadinfo.net

Трябва да направим така, че винаги когато страницата ни зарежда, да се зарежда и init(). Това става като се добави атрибут към <body> тага:


<body onLoad="init()">


След това веднага след началото на <body> тага, трябва да се добави <div> елемент, който съдържа изображението (най-често е анимирано в *.gif формат) и указва къде да се намира. Кодът ни придобива следният вид:


<body onLoad="init()">
<div id="loading" style="width: 100%; top: 300px; position: absolute; text-align: center;">
<img src="loading.gif" border="0">
</div>
</body>


*loading.gif е изображението...

Сега трябва да добавим кодът, който показва изображението, само при зареждане на страницата. Това е JavaScript кода, който добавяме в <head> тага на сайтът ни и кодът придобива следният вид:


<html>
<head>
<title>JavaScript зареждане</title>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
</head>

<body onLoad="init()">
<div id="loading" style="position:absolute; width:100%; text-align:center; top:300px;">
<img src="loading.gif" border=0>
</div>
</body>
</html>


Това е всичко. Изображението ще се показва само, когато страницата зарежда.

Превод: www.vladchooo.com
Източник: www.reconn.us









/ Трябва да сте регистриран за да напишете коментар /
От: viking
21:46 27-05-2011
Благодаря ти за труда. Ето на това му се вика урок - обяснение на елемент по елемент. :)
От: bobbykokala
3:05 29-05-2011
Аз имам проблем. Картинката винаги си стои и не изчезва!
От: Vladkata
17:50 29-05-2011
Урокът е тестван от мен и си работи без проблем. Ето ти [b]временно[/b] демо: [url=http://smb.net84.net]тук[/url].
От: batmanabg
13:13 22-07-2011
Полезен урок.
1