Preloader - bringt mich um meinen Verstand

I

iFuchs

Aktives Mitglied
Thread Starter
Dabei seit
05.07.2007
Beiträge
103
Reaktionspunkte
1
Hi,

Ich bin grad dabei ne Bandhomepage zu basteln, sie ist in Tabellen form aufgebaut wegen den slices die ich genutzt habe um rollover Effekte einzubauen.
Als ich sie hochgeladen habe ist mir aufgefallen das sie viel zu lang läd obwohl ich alle Bilder für web gespeichert hab jpg mit 60%Qualität, weniger geht wegen Qualität der Bilder nicht. Ist ja auch egal, auf jedenfall wollte ich dann einfach einen preloader davor bauen um die bilder in den cache vorzuladen.
Ich habe 3 Verschiedene versucht, mehrere Stunden danach geguckt warum sie nicht funktionieren. Mehrere Freunde gefragt keine hat nen Plan von sowas.
Die Homepage muss spätestens in 4 Tagen online gehen. Bitte helft mir!!!

Alle Preload Seiten verlinken danach auf die Startseite, dort wählt man dann die sprache aus und ein popup öffnet sich mit der eigentlichen Seite.

Bei Preload Nr. 1
Wer ich direkt auf die seite weiter verlinkt was ja eigentlich nur dann passiert wenn die angegebene Bilder vorgeladen sind. Jedoch baut sich meine Hauptseite dennoch nach und nach auf.

Preload Nr 2 funktioniert gar nicht bleibt auf der preloadseite stehen und läd auch nicht

Preload 3 genauso wie preload 2

Im Moment ist die Seit noch auf einem unterordner, jedoch sind die Preload Seiten auch dort drin von dem her müßten doch die Pfadangaben stimmen von den Bildern?!


Preload Nr. 1

<html>
<head>
<title>Preloader mit Ladeanzeige</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#000000" text="#FFFFFF">
<script language=JavaScript1.2>

<!-- begin hiding

startingColor = new Array()

endingColor = new Array()



var yourImages = new Array("Pics/Startpage.jpg","Pics/band.jpg","Pics/cover.jpg","Pics/all/images/Abstandhalter.gif","Pics/all/images/Abstandhalter.jpg","Pics/all/images/Band.jpg","Pics/all/images/Contact.jpg","Pics/all/images/Gigs.jpg","Pics/all/images/History.jpg","Pics/all/images/Impressum.jpg","Pics/all/images/Links.jpg","Pics/all/images/master_01.jpg","Pics/all/images/master_02.jpg","Pics/all/images/master_04.jpg","Pics/all/images/master_06.jpg","Pics/all/images/master_09.jpg","Pics/all/images/master_12.jpg","Pics/all/images/master_14.jpg","Pics/all/images/master_16.jpg","Pics/all/images/master_16_gig.jpg","Pics/all/images/master_17.jpg","Pics/all/images/master_18.jpg","Pics/all/images/Media.jpg","Pics/all/images/News.jpg","Pics/Beate/DSCF4305.jpg","Pics/markierte_links/images/Band.jpg","Pics/markierte_links/images/Contact.jpg","Pics/markierte_links/images/Gigs.jpg","Pics/markierte_links/images/History.jpg","Pics/markierte_links/images/Impressum.jpg","Pics/markierte_links/images/Links.jpg","Pics/markierte_links/images/Media.jpg","Pics/markierte_links/images/News.jpg") // Ersetzen und erweitern durch deine Grafiken

var locationAfterPreload = "startseite.html"

var preloadbarWidth = 300

var preloadbarHeight = 13

var backgroundOfGradient = "#000000"


startingColor[0] = "F"

startingColor[1] = "F"

startingColor[2] = "F"


endingColor[0] = "0"

endingColor[1] = "0"

endingColor[2] = "0"


var gap = 5


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>
 
Preload Nr. 2

<html>
<head>
<title>Preloader</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta http-equiv="imagetoolbar" content="no"> <!-- Style Bereich --> <style type=text/css>
/* Alternativ auch als externe Datei realisierbar */

body
{
background-color:#333333
}
a
{
cursor: hand;
}
a:link
{
color:#CCCCCC;
text-decoration: none;
}
a:visited
{
color:#000000;
text-decoration:none;
}
a:hover
{
color:#CC0000
text-decoration:none;
}
.tabelstyle
{
border-style:solid;
border-color:#000000;
border-width:1px;
}
.Stil1 {font-family: Verdana, Arial, Helvetica, sans-serif}
.Stil2 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; }
.Stil3 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #CCCCCC; }
</style> <!-- Script Bereich --> <script type="text/javascript">
var hrefAfterLoad = "startseite.html"; // Ziel der Weiterleitung.
var redirect = true; // true = Seite leitet nach dem Preload weiter | false = Seite leitet nicht nach dem Preload weiter
var preloaderLength = 152;
var loadBarNameID = "barpic";

//Hier werden die Bilder aufgelistet

//[BEGIN -->
var Pictures = new Array
(
"Pics/all/images/Abstandhalter.gif",
"Pics/all/images/Abstandhalter.jpg",
"Pics/all/images/Band.jpg",
"Pics/all/images/Contact.jpg",
"Pics/all/images/Gigs.jpg",
"Pics/all/images/History.jpg",
"Pics/all/images/Impressum.jpg",
"Pics/all/images/Links.jpg",
"Pics/all/images/master_01.jpg",
"Pics/all/images/master_02.jpg",
"Pics/all/images/master_04.jpg",
"Pics/all/images/master_06.jpg",
"Pics/all/images/master_09.jpg",
"Pics/all/images/master_12.jpg",
"Pics/all/images/master_14.jpg",
"Pics/all/images/master_16.jpg",
"Pics/all/images/master_16_gig.jpg",
"Pics/all/images/master_17.jpg",
"Pics/all/images/master_18.jpg",
"Pics/all/images/Media.jpg",
"Pics/all/images/News.jpg",


);
// <-- END]

//Ab hier nichts mehr aendern
function preloader()
{
document.getElementById(loadBarNameID).width=1;
if (!document.preImages)
{
preImages = new Array(); addition=Math.floor(preloaderLength/Pictures.length);
}
loadpics();
}
function loadpics()
{
for (i = 0; i < Pictures.length; i++)
{
preImages = new Image();preImages.src = Pictures;
}
check(0);
}
function check(done)
{
for (i = 0; i < preImages.length; i++)
{
if (preImages.complete)
{
if (done<preImages.length)
{
document.getElementById(loadBarNameID).width = parseFloat(document.getElementById(loadBarNameID).width) + addition + "px";
done++;
}
else
{
document.getElementById(loadBarNameID).width=preloaderLength;
if (redirect)
{
location.replace(hrefAfterLoad);
}
return;
}
}
}setTimeout("check("+done+")",10);
}
</script> </head> <body> <div align="center"> <h1 class="Stil2">Preloader</h1>
<p class="Stil1" style="color: white;"><br>
<br>
Bilder werden vorgeladen...<br>
<br>
</p>
<table class="tabelstyle" width="152" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img onLoad="preloader();" src="http://www.gloryage.de/sonstiges/images/bar.gif" name="barpic" width="152" height="8" id="barpic"></td> </tr> </table> <a href="/startseite.html" class="Stil3">Direkt zur Seite</a> </div>
<p> </p> <!-- Fall Javascript deaktiviert ist --> <noscript> <div style="color: white;"> <b>FEHLER:</b> Um die volle Funktionalität zu Garantieren, <b>muss</b> Javascript in ihrem Browser aktiv sein.
Wir danken für ihr Vertändniss.

<small>
Falls sie trotzdem unsere Seite betreten wollen, klicken sie auf diesen Link:
<a href="http://www.weissichdas.de">www.weisichdas.de</a> </small> </div> </noscript> </body> </html>
 
Preload Nr 3


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Preloader</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var hrefAfterLoad = "startseite.html";
var redirect = true; //true = page redirects after preloading
var preloaderLength = 120;
var loadBarNameID = "barpic";
//only pictures
var Pictures = new Array(
"Pics/Startpage.jpg",
"Pics/band.jpg",
"Pics/cover.jpg",
"Pics/all/images/Abstandhalter.gif",
"Pics/all/images/Abstandhalter.jpg",
"Pics/all/images/Band.jpg",
"Pics/all/images/Contact.jpg",
"Pics/all/images/Gigs.jpg",
"Pics/all/images/History.jpg",
"Pics/all/images/Impressum.jpg",
"Pics/all/images/Links.jpg",
"Pics/all/images/master_01.jpg",
"Pics/all/images/master_02.jpg",
"Pics/all/images/master_04.jpg",
"Pics/all/images/master_06.jpg",
"Pics/all/images/master_09.jpg",
"Pics/all/images/master_12.jpg",
"Pics/all/images/master_14.jpg",
"Pics/all/images/master_16.jpg",
"Pics/all/images/master_16_gig.jpg",
"Pics/all/images/master_17.jpg",
"Pics/all/images/master_18.jpg",
"Pics/all/images/Media.jpg",
"Pics/all/images/News.jpg",
"Pics/Beate/DSCF4305.jpg",
"Pics/markierte_links/images/Band.jpg",
"Pics/markierte_links/images/Contact.jpg",
"Pics/markierte_links/images/Gigs.jpg",
"Pics/markierte_links/images/History.jpg",
"Pics/markierte_links/images/Impressum.jpg",
"Pics/markierte_links/images/Links.jpg",
"Pics/markierte_links/images/Media.jpg",
"Pics/markierte_links/images/News.jpg"
);
function preloader(){
document.getElementById(loadBarNameID).width=1;
if (!document.preImages) {preImages = new Array(); addition=Math.floor(preloaderLength/Pictures.lengt h);}
loadpics();
}
function loadpics(){
for (i = 0; i < Pictures.length; i++) {preImages = new Image();preImages.src = Pictures;}
check(0);
}
function check(done){
for (i = 0; i < preImages.length; i++) {
if (preImages.complete) {
if (done<preImages.length){document.getElementById(lo adBarNameID).width=document.getElementById(loadBar NameID).width+addition;done++;}
else {document.getElementById(loadBarNameID).width=prel oaderLength;if (redirect){location.replace(hrefAfterLoad);}return ;}
}
}setTimeout("check("+done+")",10);
}
</script>

<body bgcolor=#000000>
<div align="center">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center">
<table class="tabelstyle" width="120" border="0">
<tr>
<td><img onLoad="preloader();" src="img/bar.jpg" name="barpic" width="120" height="5" id="barpic"></td>
</tr>
</table>
</div></td>
</tr>
</table>
</div>
<p>&nbsp;</p>
</body>
</html>
 
Drei Seiten voll Code werde ich jetzt sicher nicht durchschauen. Bitte fass die wenigstens in Code-Tags ein, damit es ein wenig leichter wird.

Vielleicht kommst Du auch komplett drumrum: Wozu brauchst Du denn die Preloader?

Wenn es nur wegen der Rollover ist, gibt’s dafür bessere Techniken: http://www.wellstyled.com/css-nopreload-rollovers.html
 
Zuletzt bearbeitet:
Also wegen rolloverbrauch ich die nicht, rollover liegen nur auf den menüpunkten, die sind mini. Ich brauchs für den Hintergrund, der sich tabellenmäßig nach und nach aufbaut, beim ersten mal besuchen, das nervt, und für die relativ vielen bildern.

"fass die wenigstens in Code Tags ein"... gern nur was ist das?
Ich kenn mich leider nur seeehr grob mit java aus.
 
Schicke Seite!

Hat im Aufbau bei mir ca. eine halbe Sekunde gedauert (DSL). Die ganze Seite ist nur 260 kb groß, da lohnt sich wirklich kein Preloader und nervt die meisten.

Sie mal nach, ein Bild von Dir (master_16.jpg) macht fast die Hälfte der Webseitengröße aus.

Ansonsten ist die doch aber echt schon klein und lädt sehr schnell. Diese Forenseite hier wiegt 360 kb, also 100 kb mehr und hat kaum Bilder.
 
die master_16 ist auch die größte vom Platzt also fast der ganze Teil wo inhalt drin ist, die kann ich nicht kleiner machen.
Würde ein Preloader nicht den kompletten stückchenhaften Aufbau verhindern?
 
Der „stückchenhafte Aufbau“ gehört doch zum Web. Das macht der Großteil aller Seiten so. Und der Vorteil ist, dass der User schon Sachen lesen kann, bevor alles fertig ist.
Preloader werden die meisten nerven.

Aber das wir hier über eine Seite mit 260 kb Größe sprechen ist fast schon albern. User mit DSL werden gar keinen Aufbau bemerken, User mit Modems sehen den Aufbau, können aber schon lesen. Die müssten ja sonst ca. 20 Sekunden dem Preloader zusehen!
Wenn es Dich wirklich stört, kannst Du ja die Hintergrundfarbe so anpassen, dass der Unterschied zwischen noch nicht geladen und fertig geladen nicht so groß ist.
 
ahh... gute Idee!
Ja ich weiß auch ned, ich hab offiziel T-DSL 16000 aber mein Inet ist meeeega lahm desshalb fällt mir besonders stark auf.

Wie auch immer vielen Dank für Antworten, dann werd ich das wohl mit dem Preloader lassen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten