# Bilder vorrausladen. Nun aber richtig!



## derwuschel (30. Januar 2004)

Es gibt ein Script das ich mal hier im Board gefunden hatte, das Bilder vorraus laden kann. Aber ich möchte mal anmerken das wohl etwas fehlt. Dazu aber Später. In grunde genommen tut es folgendes(wenn ich es richtig verstanden habe) :


```
--Hier deine Grafiken rein:
var yourImages = new Array("Bilder/test1.jpg","Bilder/test2.jpg"

--Laden der Bilder und beliebig erweiterbar.
var locationAfterPreload = "index.htm" 

--wohin die Bilder angezeigt werden sollen.
--Der Rest geht um den Farbigen Ladebalken und den nummerischen Zähler für die Bilder mit --yourImages[i]. Sicherheitshalber hier noch mal das kpl. Script:

<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="java script:location.replace(locationAfterPreload)">Ladevorgang Überspringen</a></small></p></font>')
loadImages();
// end hiding -->
</script>
```

Soweit so gut. Wie aber bindet man die die Bilder mit der Zählervariable in der nächsten Seite ein. Ich bin ganz ehrlich und gebe zu das ich mit 
<img src="Bilder/test1.jpg" width="444" height="348">
gehörig daneben lag. Hier wird doch das Bild neu geladen. Oder etwa nicht? Weiss jemand wie das geht? Da ich noch neuling bin hoffe ich auf euer verständnis wenn ich ganz verkehrt liegen sollte.


----------



## Sven Mintel (30. Januar 2004)

Die Bilder musst du ganz normal einbinden, wie in HTML üblich.

Ob der Browser sie aus dem Cache holt, wo sie sich ja nunmehr befinden sollten... oder sie nochmals neu von der Originaladresse lädt, das hängt vom Brauser ab und lässt sich nicht beeinflussen(von der Seite aus).

Woher er sie nun wirklich holt, bekommst du z.B. über deine Logfiles raus... wenn auf jeder einzelnen Seite nochmals ne Serveranfrage betreffs der Bilder erfolgt, dann holt er sie wahrscheinlich nicht aus dem Cache... kann aber auch sein, dass er nur nachschaut, ob sich das Bild verändert hat.


----------



## derwuschel (30. Januar 2004)

ja, aber wie wäre nun betreffende Zeile richtig? Der Zähler (i) ist doch nicht umsonst da. Müsste es nicht 

```
<img src=yourImages[i]>
```

oder so ähnlich heissen. Habs natürlich schon getestet, ging aber nicht. Für [ i] muss natürlich die Zahl 1 rein wenn es das erste Bild sein soll.


----------



## Sven Mintel (30. Januar 2004)

Nö... ganz normal einbinden:
	
	
	



```
<img src="bild.gif">
```
du hast doch auf Folgeseiten keinen Zugriff mehr auf Objekte, die davor irgendwo erzeugt wurden.... sobald die Preload-Seite weg ist, sind auch alle JS-Sachen darin über den Jordan.

Das Preloaden bewirkt, dass die Bilder in den Browsercache geladen werden, wo er sie bei Bedarf herholen sollte... auch auf Folgeseiten

.... geladen werden müssen die Bilder auf jeden Fall neu... es geht halt nur bedeutend schneller, wenn der Browser sie aus seinem Cache holen kann und nicht von der Originaladresse.


----------



## derwuschel (30. Januar 2004)

Danke für die schnelle Hilfe!
Muss noch viel,viel lernen....


----------

