Seite 1 von 1
Hintergrundbild
Verfasst: 16.11.2003 20:08
von Dominican-Dreams
Hi Leute,
es hat zwar wenig mit phpbb zu tun, aber vielleicht ist es für Andere auch interessant.
Ich suche einen einfachen Weg eine Loading... Anzeige auf die Seiten einzubauen.
Nun habe ich mir überlegt einfach ein zweites Hintergrundbild in der Mitte des Bildschirms einzubauen (Loading Bild).
Wenn danach meine Tabellen geladen sind, wird das Bild einfach von der Tabelle überdeckt!
Mein Problem:
Ich habe schon ein Hintergrundbild für den kompletten Hintergrund und ich habe noch keine Möglichkeit gefunden ein Bild zu positionieren, was dann von Tabellen überdeckt wird.
Habt Ihr eine Idee???
Verfasst: 16.11.2003 21:46
von King Crusty
Spiel mal damit rum, das mit deinem Hintergrundbild wird eher ....nichts, würd ich mal sagen.
Code: Alles auswählen
<html>
<head>
<title>Preloader mit Ladeanzeige</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<script language=JavaScript1.2>
<!--
startingColor = new Array() // <-- NICHT VERÄNDERN!
endingColor = new Array() // <-- NICHT VERÄNDERN!
// Hier deine Grafiken rein:
var yourImages = new Array("saurier.jpg","mickey.gif","donald.jpg") // Ersetzen und erweitern durch deine Grafiken
var locationAfterPreload = "index.htm" // Hier den Pfad zur Seite die nach dem Vorladen geladen werden soll
var preloadbarWidth = 400 // Länge des Balkens
var preloadbarHeight = 13 // Höhe des Balkens
var backgroundOfGradient = "#ffffff" // Hintergrundfarbe des Balkens
// Farbe mir der der Balken beginnt!
startingColor[0] = "f"
startingColor[1] = "8"
startingColor[2] = "f"
// Wie oben nur die Farbe mit dem es endet
endingColor[0] = "f"
endingColor[1] = "f"
endingColor[2] = "f"
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[i] = startingColor[i].toLowerCase();
endingColor[i] = endingColor[i].toLowerCase();
startingColor[i] = eval(startingColor[i]);
endingColor[i] = eval(endingColor[i]);
diff[i] = (endingColor[i]-startingColor[i])/num;
ones[i] = Math.floor(diff[i]);
sixteens[i] = Math.round((diff[i] - ones[i])*15);
}
endingColor[0] = 0;
endingColor[1] = 0;
endingColor[2] = 0;
i = 0, j = 0;
while (i <= num) {
hilite[i] = "#";
while (j < 3) {
hilite[i] += convert[startingColor[j]];
hilite[i] += 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[i] = new Image();
preImages[i].src = yourImages[i];
loaded[i] = 0;
cover[i] = 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[i] && preImages[i].complete) {
loaded[i] = 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%]."
//-->
</script>
<font face="Verdana, Arial, Helvetica, sans-serif" size="2">Bilder werden geladen...
</font><br>
<script language=JavaScript1.2>
<!--
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();
// -->
</script>
</body>
</html>
Verfasst: 17.11.2003 17:46
von Dominican-Dreams
Danke für das Beispiel, aber es hilft mir nicht richtig weiter, da man nur Bilder vorläd, aber keine kompletten Seiten.
Ich habe das problem, das ich Seiten mit ca 40 Countern lade und dies dauert recht lang!
Daher wollte ich halt eine Ladeanzeige einbauen die unkompliziert aber effektiv ist!
mal sehen ob noch andere Vorschläge kommen!
Verfasst: 17.11.2003 19:25
von Pyramide
Hmm, also ich weiß ja nicht welchen Browser du verwendest, aber meiner hat unten in der Statusleiste so einen schönen blauen Balken, der anzeigt daß eine Seite geladen wird
Verfasst: 17.11.2003 19:47
von sledgi
Wo findet man so xmas hintergrundbilder
Verfasst: 17.11.2003 19:49
von NicoH
zu was braucht man 40 Counter?
reicht einer nicht ?
Deine Frage: Es gibt glaube keine Ladeseiten wo man html oder php usw vorladen kann (komplette Seiten), man kann nur Bilder laden...
Das einzige Programm was das kann ist Flash , aber ich habe meine Probleme damit!...