Hej! Kanske något i stil med detta exempel? Det här kanske ger dig en idé: <code>håller på att ladda...
Jag har en meny som tar 8 sekunder att ladda på sidan. Är det en bra möjlighet att först visa en text typ:"the menu is loading..." undertiden? Är det någon som känner till ett sådant skript? Det måste vara i javaScript eftersom jag bara använder mig av det och html.
Gärna så kort som möjligt, eller att det tar så lite minne som möjligt.
/DianaSv: håller på att ladda...
http://www.javascriptkit.com/script/script2/progressbar.shtml
<code>
</style>
<SCRIPT LANGUAGE="JavaScript">
//Progress Bar script- by Todd King (tking@igpp.ucla.edu)
//Modified by JavaScript Kit for NS6, ability to specify duration
//Visit JavaScript Kit (http://javascriptkit.com) for script
var duration=3 // Specify duration of progress bar in seconds
var _progressWidth = 50; // Display width of progress bar
var _progressBar = new String("");
var _progressEnd = 10;
var _progressAt = 0;
// Create and display the progress dialog.
// end: The number of steps to completion
function ProgressCreate(end) {
// Initialize state variables
_progressEnd = end;
_progressAt = 0;
// Move layer to center of window to show
if (document.all) { // Internet Explorer
progress.className = 'show';
progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2);
progress.style.top = document.body.scrollTop+(document.body.clientHeight/2) - (progress.offsetHeight/2);
} else if (document.layers) { // Netscape
document.progress.visibility = true;
document.progress.left = (window.innerWidth/2) - 100;
document.progress.top = pageYOffset+(window.innerHeight/2) - 40;
} else if (document.getElementById) { // Netscape 6+
document.getElementById("progress").className = 'show';
document.getElementById("progress").style.left = (window.innerWidth/2)- 100;
document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40;
}
ProgressUpdate(); // Initialize bar
}
// Hide the progress layer
function ProgressDestroy() {
// Move off screen to hide
if (document.all) { // Internet Explorer
progress.className = 'hide';
} else if (document.layers) { // Netscape
document.progress.visibility = false;
} else if (document.getElementById) { // Netscape 6+
document.getElementById("progress").className = 'hide';
}
}
// Increment the progress dialog one step
function ProgressStepIt() {
_progressAt++;
if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
ProgressUpdate();
}
// Update the progress dialog with the current state
function ProgressUpdate() {
var n = (_progressWidth / _progressEnd) * _progressAt;
if (document.all) { // Internet Explorer
var bar = dialog.bar;
} else if (document.layers) { // Netscape
var bar = document.layers["progress"].document.forms["dialog"].bar;
n = n * 0.55; // characters are larger
} else if (document.getElementById){
var bar=document.dialog.bar
}
var temp = _progressBar.substring(0, n);
bar.value = temp;
}
// Demonstrate a use of the progress dialog.
function Demo() {
ProgressCreate(10);
window.setTimeout("Click()", 100);
}
function Click() {
if(_progressAt >= _progressEnd) {
ProgressDestroy();
return;
}
ProgressStepIt();
window.setTimeout("Click()", (duration-1)*1000/10);
}
function CallJS(jsStr) { //v2.0
return eval(jsStr)
}
</script>
<SCRIPT LANGUAGE="JavaScript">
// Create layer for progress dialog
document.write("<span id=\"progress\" class=\"hide\">");
document.write("<FORM name=dialog>");
document.write("<TABLE border=2 bgcolor=\"#FFFFCC\">");
document.write("<TR><TD ALIGN=\"center\">");
document.write("Progress<BR>");
document.write("<input type=text name=\"bar\" size=\"" + _progressWidth/2 + "\"");
if(document.all||document.getElementById) // Microsoft, NS6
document.write(" bar.style=\"color:navy;\">");
else // Netscape
document.write(">");
document.write("</TD></TR>");
document.write("</TABLE>");
document.write("</FORM>");
document.write("</span>");
ProgressDestroy(); // Hides
</script>
<form name="form1" method="post">
<center>
<input type="button" name="Demo" value="Display progress" onClick="CallJS('Demo()')">
</center>
</form>
Text link example
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2">JavaScript
Kit</font></p>
</code>Sv: håller på att ladda...
<code>
<style type="text/css">
#loading {
z-index: 10;
position: absolute;
left: 200px;
top: 20px;
background: #ffc;
border: 5px solid #000;
}
</style>
<script type="text/javascript">
function hideloading()
{
document.getElementById('loading').style.display='none';
}
</script>
<body onload="setTimeout('hideloading()', 5000)">
<div id="loading">
Sidan laddas
</div>
</body>
</code>Sv: håller på att ladda...
<div id="textin2"><img src="loading_pic.gif"><img src="loading_text.gif"></div>
<script language="javascript">
document.getElementById("textin2").innerText='';
</script>
</code>
väldigt enkel kod, men den funkar. :)