• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

background-image Preload?

Publisher

Publisher

Neues Mitglied
Hallo miteinander!

Website WISANI - Metabolic Balance

Ich habe auf dieser Website ein 2000x1600px Background Bilder. Dieser erscheint beim ersten aufruf erst 1-2 Sekunden nach dem Content. Gibt es ein Code wo zuerst dieses bg Image im Body zuerst als alles andere angezeigt wird?

In Google finde ich nur Hover sachen für bg-image preload, brauche ich aber nicht.

Danke für die Feedbacks!
 
Werbung:
probier mal:

HTML: 
<body onload="deine_function();">
//content
</body>

hab das noch nie in der art benutzt aber das wär das einzgie was mir dazu einfällt.
machst dann einfach ne javascript funktion die dem body eine hintergrundfarbe(/-bild) zuteilt.

vll geht das ja... andere vorschläge?
 
AUTSCH

das ist jetzt nicht dein ernst, Du fragst wie du ein 3,8 MB großes Hintergrund ohne jegliche aussage vor dem eigentlichen Inhalt der Seite Laden kannst?
1-2 Sekunden nach dem Content
Zum Vergrößern anklicken....
Ich habe eine 6000 Leitung und da dauert das mehr 10sec als 1-2 ist mehr wunschdenken :O)

Anderer Vorschlag:
In dem die Seite 1min ausblendest bis alles geladen ist und das dan per js einblendest und das auf jeder Seite, vielleicht ist ja dann noch einer auf der Seite. :O)

Spass vorbei,
mach die Bilder kleiner, das werden dir alle nicht DSL nutzer und mobil nutzer wie ipad, iphon... sehr danken. 150Kb muss reichen.


ps:
- Impressum habe ich auf die schnelle auch nicht gesehen, kann teuer werden
- Scoll im fenster ist auch suboptimal, ich habe deswegen 2 Scroll (Inhalt/Browserfenster)
- usw :O)

Cheffchen
 
Werbung:
Hier der Code:

HTML: 
<html>
<head>
<title>Preloader</title>

<script language=JavaScript1.2>
var browser = navigator.appName;
<!-- begin hiding

startingColor = new Array() // <-- NICHT VERÄNDERN!

endingColor = new Array() // <-- NICHT VERÄNDERN!

// Hier deine Grafiken rein:

var yourImages = new Array("Bild.jpg, ") // Ersetzen und erweitern durch deine Grafiken

var locationAfterPreload = "Startseite.html" // Hier den Pfad zur Seite die nach dem Vorladen geladen werden soll

var preloadbarWidth = 400 // Länge des Balkens

var preloadbarHeight = 20 // Höhe desselbigen

var backgroundOfGradient = "#000000"

// Farbe mit der der Balken beginnt! Gib erste, dritte und fünfte Zahl/Buchstaben der Farbe an

startingColor[0] = "9"

startingColor[1] = "6"

startingColor[2] = "2"

// Wie oben nur die Farbe mit dem es endet

endingColor[0] = "C"

endingColor[1] = "9"

endingColor[2] = "6"


var gap = 7 // mind. 2! verändern, wenn es einen JS-Error gibt.

// NIX MEHR VERÄNDERN

if (browser == "Microsoft Internet Explorer") {
if (!document.all) location.replace(locationAfterPreload)
}
else {
if (!document.getElementById) 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;

}

if (browser == "Microsoft Internet Explorer") {
eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;
}
else {
document.getElementById('cell'+(h+1)).style.backgroundColor = hilite[h];
}

h++;

setTimeout("changeto()",1);

}

defaultStatus = "Loaded 0 out of " + imgLen + " images [0%]."

// end hiding -->

</script>
</head>
<body>



<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 &Uuml;berspringen</a></small></p></font>')

loadImages();

// end hiding -->

</script>
<br><br>
<noscript>
<p>
Javascript deaktiviert? Dann geht es hier weiter ----> <b><a href="Startseite.html">Startseite</a></b>
</p>
</noscript>

</body>
</html>

Allerdings muss dabei das Bild vor dem Aufrufen der Seite geladen werden und der Benutzer wird nach dem abgeschlossenen Laden des Bildes automatisch auf die Seite weitergeleitet. (Sofern JS aktiviert ist)
 
Werbung:
@lowsaxonian: So liest man sich wieder. :O)
lowsaxonian schrieb:
Doch, ist da
Zum Vergrößern anklicken....
Impressum, du meinst jetzt nicht die zwei Angaben bei Preise oder bin ich total Blind.
Ich sehe da nichts was auch nur in der richtung geht.

Wollt Ihr wirklich auf Websiten Surfen wo erst 30MB vorgeladen werden müssen bevor Iher den ersten Buchstaben zu sehen bekommt.
Das war jetzt keine Frage sondern nur mal so auf die Erde geschmiessen.

Cheffchen
 
@Cheffchen
impressum gibt´s keins, da war ich vermutlich vorher in ´nem anderen Trööt unterwegs. Sorry für die sinnfreie Falschauskunft :-?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben