Preloader
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
-
Hi,
ich habe folgendes Preloader Script:
<html>
<head>
<title>Preloader mit Ladeanzeige</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<script language=JavaScript1.2>
<!-- begin hiding
startingColor = new Array() // <-- NICHT VER?NDERN!
endingColor = new Array() // <-- NICHT VER?NDERN!
// Hier deine Grafiken rein:
var yourImages = new Array(
"html/themes/cms-themes-bluetech/images/area_ml.gif",
"html/themes/cms-themes-bluetech/images/area_mo.gif",
"html/themes/cms-themes-bluetech/images/area_mr.gif",
"html/themes/cms-themes-bluetech/images/area_mu.gif",
"html/themes/cms-themes-bluetech/images/area_ol.gif",
"html/themes/cms-themes-bluetech/images/area_or.gif",
"html/themes/cms-themes-bluetech/images/area_ul.gif",
"html/themes/cms-themes-bluetech/images/area_ur.gif",
"html/themes/cms-themes-bluetech/images/b_mitte_l.gif",
"html/themes/cms-themes-bluetech/images/b_mitte_m.gif",
"html/themes/cms-themes-bluetech/images/b_mitte_r.gif",
"html/themes/cms-themes-bluetech/images/b_oben2_bg.gif",
"html/themes/cms-themes-bluetech/images/b_oben2_links.gif",
"html/themes/cms-themes-bluetech/images/b_oben2_rechts.gif",
"html/themes/cms-themes-bluetech/images/b_oben_bg.gif",
"html/themes/cms-themes-bluetech/images/b_oben_links.gif",
"html/themes/cms-themes-bluetech/images/b_oben_rechts.gif",
"html/themes/cms-themes-bluetech/images/b_unten2_l.gif",
"html/themes/cms-themes-bluetech/images/b_unten2_m.gif",
"html/themes/cms-themes-bluetech/images/b_unten2_r.gif",
"html/themes/cms-themes-bluetech/images/b_unten2_r_leer.gif",
"html/themes/cms-themes-bluetech/images/b_unten_l.gif",
"html/themes/cms-themes-bluetech/images/b_unten_m.gif",
"html/themes/cms-themes-bluetech/images/b_unten_r.gif",
"html/themes/cms-themes-bluetech/images/botbg.gif",
"html/themes/cms-themes-bluetech/images/botleft.gif",
"html/themes/cms-themes-bluetech/images/botright.gif",
"html/themes/cms-themes-bluetech/images/bottombg.gif",
"html/themes/cms-themes-bluetech/images/bottomleft.gif",
"html/themes/cms-themes-bluetech/images/bottomleftm.gif",
"html/themes/cms-themes-bluetech/images/bottomlefto.gif",
"html/themes/cms-themes-bluetech/images/bottomleftu.gif",
"html/themes/cms-themes-bluetech/images/bottomobenbg.gif",
"html/themes/cms-themes-bluetech/images/bottomright.gif",
"html/themes/cms-themes-bluetech/images/bottomrightm.gif",
"html/themes/cms-themes-bluetech/images/bottomrighto.gif",
"html/themes/cms-themes-bluetech/images/bottomrightu.gif",
"html/themes/cms-themes-bluetech/images/bottomuntenbg.gif",
"html/themes/cms-themes-bluetech/images/catbg.gif",
"html/themes/cms-themes-bluetech/images/dark_line.gif",
"html/themes/cms-themes-bluetech/images/header_tile.gif",
"html/themes/cms-themes-bluetech/images/iplightbarbg.gif",
"html/themes/cms-themes-bluetech/images/ipltopleft.gif",
"html/themes/cms-themes-bluetech/images/ipltopleftbg.gif",
"html/themes/cms-themes-bluetech/images/ipltopright.gif",
"html/themes/cms-themes-bluetech/images/leftbar.gif",
"html/themes/cms-themes-bluetech/images/leftbg.gif",
"html/themes/cms-themes-bluetech/images/logo.gif",
"html/themes/cms-themes-bluetech/images/logobg.gif",
"html/themes/cms-themes-bluetech/images/mainbar.gif",
"html/themes/cms-themes-bluetech/images/membarbg.gif",
"html/themes/cms-themes-bluetech/images/n_mitte_l.gif",
"html/themes/cms-themes-bluetech/images/n_mitte_m.gif",
"html/themes/cms-themes-bluetech/images/n_mitte_r.gif",
"html/themes/cms-themes-bluetech/images/n_oben_l.gif",
"html/themes/cms-themes-bluetech/images/n_oben_m.gif",
"html/themes/cms-themes-bluetech/images/n_oben_r.gif",
"html/themes/cms-themes-bluetech/images/n_unten_l.gif",
"html/themes/cms-themes-bluetech/images/n_unten_m.gif",
"html/themes/cms-themes-bluetech/images/n_unten_r.gif",
"html/themes/cms-themes-bluetech/images/postbotbg.gif",
"html/themes/cms-themes-bluetech/images/postopbg.gif",
"html/themes/cms-themes-bluetech/images/posttopbg.gif",
"html/themes/cms-themes-bluetech/images/posttopleftbg.gif",
"html/themes/cms-themes-bluetech/images/posttoprightbg.gif",
"html/themes/cms-themes-bluetech/images/rightbar.gif",
"html/themes/cms-themes-bluetech/images/rightbg.gif",
"html/themes/cms-themes-bluetech/images/space.gif",
"html/themes/cms-themes-bluetech/images/tile.gif",
"html/themes/cms-themes-bluetech/images/tile_back.gif",
"html/themes/cms-themes-bluetech/images/tile_back_small.gif",
"html/themes/cms-themes-bluetech/images/tile_botsub.gif",
"html/themes/cms-themes-bluetech/images/tile_pimfo.gif",
"html/themes/cms-themes-bluetech/images/tile_post.gif",
"html/themes/cms-themes-bluetech/images/tile_sep.gif",
"html/themes/cms-themes-bluetech/images/tile_stat.gif",
"html/themes/cms-themes-bluetech/images/tile_stat2.gif",
"html/themes/cms-themes-bluetech/images/tile_sub.gif",
"html/themes/cms-themes-bluetech/images/tilepoststart.gif",
"html/themes/cms-themes-bluetech/images/topbg.gif",
"html/themes/cms-themes-bluetech/images/topleft.gif",
"html/themes/cms-themes-bluetech/images/topright.gif")
// Ersetzen und erweitern durch deine Grafiken
var locationAfterPreload = "http://www.silent-design.gi-host.com/fun_com/html" // Hier den Pfad zur Seite die nach dem Vorladen geladen werden soll
var preloadbarWidth = 300 // L?nge des Balkens
var preloadbarHeight = 13 // H?he desselbigen
var backgroundOfGradient = "#000000"
// Farbe mir der der Balken beginnt! Gib erste, dritte und f?nfte Zahl/Buchstaben der Farbe an
startingColor[0] = "F"
startingColor[1] = "F"
startingColor[2] = "F"
// Wie oben nur die Farbe mit dem es endet
endingColor[0] = "0"
endingColor[1] = "0"
endingColor[2] = "0"
var gap = 7 // mind. 2! ver?ndern, wenn es nen JS-Error gibt.
// NIX MEHR VER?NDERN
if (!document.all) location.replace(locationAfterPreload)
var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, ones = new Array(), sixteens = new Array(), diff = new Array();
var convert = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"), imgLen = yourImages.length;
var loaded = new Array(), preImages = new Array(), currCount = 0, pending = 0, h = 0, hilite = new Array(), cover = new Array();
var num = Math.floor(preloadbarWidth/gap);
for (i = 0; i < 3; i++) {
startingColor = startingColor.toLowerCase();
endingColor = endingColor.toLowerCase();
startingColor = eval(startingColor);
endingColor = eval(endingColor);
diff = (endingColor-startingColor)/num;
ones = Math.floor(diff);
sixteens = Math.round((diff - ones)*15);
}
endingColor[0] = 0;
endingColor[1] = 0;
endingColor[2] = 0;
i = 0, j = 0;
while (i <= num) {
hilite = "#";
while (j < 3) {
hilite += convert[startingColor[j]];
hilite += convert[endingColor[j]];
startingColor[j] += ones[j];
endingColor[j] += sixteens[j];
if (endingColor[j] > 15) {
endingColor[j] -= 15;
startingColor[j]++;
}
j++;
}
j = 0;
i++;
}
function loadImages() {
for (i = 0; i < imgLen; i++) {
preImages = new Image();
preImages.src = yourImages;
loaded = 0;
cover = Math.floor(num/imgLen)*(i+1)
}
cover[cover.length-1] += num%imgLen
checkLoad();
}
function checkLoad() {
if (pending) { changeto(); return }
if (currCount == imgLen) { location.replace(locationAfterPreload); return }
for (i = 0; i < imgLen; i++) {
if (!loaded && preImages.complete) {
loaded = 1; pending++; currCount++;
checkLoad();
return;
}
}
setTimeout("checkLoad()",10);
}
function changeto() {
if (h+1 > cover[currCount-1]) {
var percent = Math.round(100/imgLen)*currCount;
if (percent > 100) while (percent != 100) percent--;
if (currCount == imgLen && percent < 100) percent = 100;
defaultStatus = "Loaded " + currCount + " out of " + imgLen + " images [" + percent + "%].";
pending--;
checkLoad();
return;
}
eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;
h++;
setTimeout("changeto()",1);
}
defaultStatus = "Loaded 0 out of " + imgLen + " images [0%]."
// end hiding -->
</script>
<b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Bilder werden geladen...
</font></b><br>
<script language=JavaScript1.2>
<!-- beging hiding
document.write('<table border="0" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');
for (i = 0; i < num; i++) {
document.write('<td width="' + gap + '" id="cell' + (i+1) + '"></td>');
}
document.write('</tr></table>');
document.write('<p><small><a href="javascript:location.replace(locationAfterPreload)">Ladevorgang ?berspringen</a></small></p></font>')
loadImages();
// end hiding -->
</script>
</body>
</html>
In der Stausleiste des Browsers wird zwar der Vortschritt in % angezegt. aber der ladebalken f?llt sich erst wenn alle bilder geladen sind. Wo liegt hier das Problem???
MfG
Nicmar -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Woah wasn script, ich hab leider keine Ahnung, allein das durchlesen hat ja schon stunden gedauert
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage