Hi,
ich habe ein Problem.
ich habe von euch mal einen Preloader kopiert. (funktioniert auch gut) nur leider ist er langsam nichtmehr so besonders....
Meine Frage nun, wie bau ich da die Jquery Proccess Bar ein ?
jQuery Processbar:
Währ über eine kleine Hilfe sehr dankbar...
(link zu Jquery
jQuery UI - Demos & Documentation )
Grüße
ich habe ein Problem.
ich habe von euch mal einen Preloader kopiert. (funktioniert auch gut) nur leider ist er langsam nichtmehr so besonders....
Meine Frage nun, wie bau ich da die Jquery Proccess Bar ein ?
Code:
<html>
<head>
<title>Willkommen</title>
<script>
if(navigator.appName.indexOf("Netscape") > -1 &&
navigator.appVersion.substr(0,1) <= "4")
parent.location.href="index2.php";
url = "index2.php";
progress= new Array(
'images/hg_back.jpg',
'images/bg_hp.jpg',
'images/inhalt/inhalt_oben_links.png',
'images/inhalt/inhalt_oben_mitte.png',
'images/inhalt/inhalt_oben_rechts.png',
'images/inhalt/inhalt_mitte_rechts.png',
'images/inhalt/inhalt_mitte_links.png',
'images/inhalt/inhalt_unten_links.png',
'images/inhalt/inhalt_unten_mitte.png',
'images/inhalt/inhalt_unten_rechts.png',
'images/ramen/ramen_oben_links.png',
'images/ramen/ramen_oben_mitte.png',
'images/ramen/ramen_oben_rechts.png',
'images/ramen/ramen_mitte_rechts.png',
'images/ramen/ramen_mitte_links.png',
'images/ramen/ramen_unten_rechts.png',
'images/ramen/ramen_unten_mitte.png',
'images/ramen/ramen_unten_links.png',
'images/button_hover.png',
'images/button_normal.png',
'images/copyright.png',
'images/logo.png',
'images/aion_1.png',
'images/blank.gif',
'images/preload.gif',
'images/swirls.png');
/* EIGENSCHAFTEN ENDE */
var x;
function preload()
{
p = new Array();
x = 0;
for(i=0;i<progress.length;i++)
{
p[i] = new Image();
p[i].onabort = update;
p[i].onerror = update;
p[i].onload = update;
p[i].src = progress[i];
}
}
function update()
{
x++;
pro=Math.floor((x/progress.length)*100);
document.images["balken"].width=pro*2.5;
(document.all) ?
dom=document.all["prozent"] :
dom=document.getElementById("prozent");
dom.innerHTML= pro+" %";
(document.all) ?
dom2=document.all["elemente"] :
dom2=document.getElementById("elemente");
dom2.innerHTML= x+" von "+progress.length+" Elementen geladen";
if(pro==100) location.href=url;
}
</script>
<style type="text/css">
<!--
body {
color: #FFFFFF;
background-color: #000000;
}
-->
</style>
</head>
<body onLoad="preload()" bgcolor=#FFFFFF>
<table width=100% height=100% align=center cellpadding="0" cellspacing="0">
<td align=center>
<table align="center" width="250" height="400" cellpadding="0" cellspacing="0">
<tr>
<td align="center" height="50" valign="top">Willkommen auf meiner Homepage</td>
</tr>
<tr>
<td align="left" height="20">
<div id="prozent" class="ladefortschritt">0 %</div>
</td>
</tr>
<tr>
<td align="left" height="20"><img src=images/preload.gif height=6 width=0 name=balken></td>
</tr>
<tr>
<td height="20">
<div id="elemente" class="ladefortschritt">0 von 0 Elementen geladen</div>
</td>
</tr>
<tr>
<td valign="bottom" height="290" align="center"><a class="text_preloader">Falls
meine Website nicht automatisch lädt <br>
klicken Sie bitte </a><a href="index2.php" class="text_preloader"><u>hier</u></a></td>
</tr>
</table>
</td>
</table>
</body>
</html>jQuery Processbar:
Code:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#progressbar").progressbar({
value: 37
});
});
</script>
<div class="demo">
<div id="progressbar"></div>
</div><!-- End demo -->
<div style="display: none;" class="demo-description">
<p>Default determinate progress bar.</p>
</div><!-- End demo-description -->Währ über eine kleine Hilfe sehr dankbar...
(link zu Jquery
jQuery UI - Demos & Documentation )
Grüße