Я'работаю над сайтом, который содержит целую кучу mp3 и изображений, и я'хотел бы отобразить загрузочный gif во время загрузки всего содержимого.
Я понятия не имею, как этого добиться, но у меня есть анимированный gif, который я хочу использовать.
Есть какие-нибудь предложения?
Обычно сайты делают это путем загрузки содержимого через ajax и прослушивания события readystatechanged
для обновления DOM с помощью загружаемого GIF или содержимого.
Как вы в настоящее время загружаете контент?
Код будет выглядеть примерно так:
function load(url) {
// display loading image here...
document.getElementById('loadingImg').visible = true;
// request your data...
var req = new XMLHttpRequest();
req.open("POST", url, true);
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
// content is loaded...hide the gif and display the content...
if (req.responseText) {
document.getElementById('content').innerHTML = req.responseText;
document.getElementById('loadingImg').visible = false;
}
}
};
request.send(vars);
}
Существует множество сторонних библиотек javascript, которые могут облегчить вам жизнь, но вышеописанное - это действительно все, что вам нужно.
Вы сказали, что не хотите делать это в AJAX. Хотя AJAX отлично подходит для этого, есть способ показать один DIV, пока ожидается загрузка всего <body>
. Это выглядит примерно так:
<html>
<head>
<style media="screen" type="text/css">
.layer1_class { position: absolute; z-index: 1; top: 100px; left: 0px; visibility: visible; }
.layer2_class { position: absolute; z-index: 2; top: 10px; left: 10px; visibility: hidden }
</style>
<script>
function downLoad(){
if (document.all){
document.all["layer1"].style.visibility="hidden";
document.all["layer2"].style.visibility="visible";
} else if (document.getElementById){
node = document.getElementById("layer1").style.visibility='hidden';
node = document.getElementById("layer2").style.visibility='visible';
}
}
</script>
</head>
<body onload="downLoad()">
<div id="layer1" class="layer1_class">
<table width="100%">
<tr>
<td align="center"><strong><em>Please wait while this page is loading...</em></strong></p></td>
</tr>
</table>
</div>
<div id="layer2" class="layer2_class">
<script type="text/javascript">
alert('Just holding things up here. While you are reading this, the body of the page is not loading and the onload event is being delayed');
</script>
Final content.
</div>
</body>
</html>
Событие onload не сработает, пока не загрузится вся страница. Поэтому layer2 <DIV>
не будет отображаться, пока страница не закончит загрузку, после чего сработает onload.
На самом деле есть довольно простой способ сделать это. Код должен быть примерно таким:
<script type="test/javascript">
function showcontent(x){
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 1) {
document.getElementById('content').innerHTML = "<img src='loading.gif' />";
}
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('content').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('POST', x+'.html', true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(null);
}
А в HTML:
<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>
Я сделал нечто подобное на своей странице, и это отлично работает.