bilder laden

Status
Nicht offen für weitere Antworten.
Maffy

Maffy

Erfahrenes Mitglied
auf manchen hp sieht man einen preloader, der alle bilder einer seite läd. wie kann man sowas in seiner eigenen page einbauen.

ich möcht eine startseite einrichten auf der nur ein banner oder logo der site ist und eben dieser preloader, der alle grafiken vorrausläd.

gruß maffy

Meine Homepage
 
danke für die frage. ich werd sie nicht beantworten, werd nur mein anliegen posten:

leute, ich weiss dass es da draussen hunderte von preloader-scripts gibt. ich wäre euch allerdings sehr verbunden, wenn mir mal jemand erklären würde, wie die teiler im grund aufgebaut sind - würde nämlich so einen gerne selber basteln. also was man eigentlich tun muss damit die bilder vorgeladen werden.
 
Oder den hier, der funzt 100%. Ich hab bloß keine Ahnung wer den geschrieben hat ;)
Code: 
<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("ie5mac.gif","testani.gif") // Ersetzen und erweitern durch deine Grafiken

var locationAfterPreload = "../trickkiste/tricks130.shtml" // 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[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%]."

// 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>
 
Ich habe dieses javascript gefunden:
Code: 
<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("ie5mac.gif","testani.gif") // Ersetzen und erweitern durch deine Grafiken

var locationAfterPreload = "../trickkiste/tricks130.shtml" // 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[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%]."

// 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>

gruß maffy
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück