Liebe Experten,
als blutiger HTML-Anfänger weiß ich nicht, wie ich Bilder preloaden kann.
Ich habe jetzt die HTML-Referenz durchstöbert im Kapitel „Grafiken“, da gabs aber keinen Hinweis darauf.
Dann habe ich auf Seiten, die Java-Scripts anbieten, gesucht, aber in Verbindung mit „Grafik“ bin ich ebenfalls nicht fündig geworden.
Alternativ würde ich auch komprimieren akzeptieren (hab mal gehört, sowas geht).
Wer kann mir helfen?
Hanna
Hi Hanna
Ganz schön fleißig (6 Kinder):o)
Aber nun zu Deiner Frage.
Mit diesem Script im Head werden die Bilder vorausgeladen.
Du mußt natürlich anstelle von photo01.jpg usw. Deine Bilder (evtl. mit Pfad) angeben.
CU Fr@nkie
The Truth Is Out There … ;o)
BILDER
<!–
var MyImages = new Array(„photo01.jpg“,„photo02.jpg“,„photo03.jpg“,„photo04.jpg“,„photo05.jpg“,„photo06.jpg“) // 'Die Bilder (bzw.der Bilderpfad als Textstring) werden in eine Array geladen
var img=„images/“
var ImagesProp = new Array() // Es wird ein neues Array erzeugt und in diesem die Bilder als Image-Objekte erzeugt.
for (i=0; i<MyImages.length; i++) {
ImagesProp[i] = new Image();
ImagesProp[i].src=img+MyImages[i];
}
//–>
Hi Hanna
Nun nochmal extra damit wir nicht durcheinander kommen.
Hier das ganze mit einer „Preloadanzeige“.
CU Fr@nkie
The Truth Is Out There … ;o)
Preloader mit Ladeanzeige
<!–
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%].“
//–>
Bilder werden geladen…
<!–
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();
// -->
Hallo Fr@nkie,
Ganz schön fleißig (6 Kinder):o)
Hach, ich liebe Kinder einfach! Und ich fand immer schon, eine Familie sei erst mit 5 Kindern so richtig „rund“. 
Aber nun zu Deiner Frage.
Mit diesem Script im Head werden die Bilder vorausgeladen.
Du mußt natürlich anstelle von photo01.jpg usw. Deine Bilder
(evtl. mit Pfad) angeben.
So weit, so klar.
BILDER
<!–
var MyImages = new
Array(„photo01.jpg“,„photo02.jpg“,„photo03.jpg“,„photo04.jpg“,„photo05.jpg“,„photo06.jpg“)
// 'Die Bilder (bzw.der Bilderpfad als Textstring) werden in
eine Array geladen
var img=„images/“
var ImagesProp = new Array() // Es wird ein neues Array
erzeugt und in diesem die Bilder als Image-Objekte erzeugt.
for (i=0; i<MyImages.length; i++) {
ImagesProp[i] = new Image();
ImagesProp[i].src=img+MyImages[i];
}
//–>
hmmm… Jetzt frag ich mal ganz blöd:
Wann beginnt denn der Computer zu preloaden?
Wenn man die Seite mit den Bildern aufruft oder schon beim Betreten der HP?
Ich verstehe den Vorgang des Preloadens nicht.
Einmal hab ich den Tipp gehört, die Bilder schon auf der Startseite ganz unten mit width=„1“ height=„1“ einzubauen, dann hat der Comuter Zeit, die Bilder runter zu laden, bevor man die entsprechende Seite aufruft.
Aber was und wie und wann macht das Preload-Script???
Danke und Sternchen
Hanna
P.S. Am 6.Juli ist ein wer-weiss-was-Expertentreffen in München. Hast Du Zeit und Lust, zu kommen? Weit hast Du’s ja nicht 
))
Hallo Fr@nkie,
wenn das Preloaden für drei Bildchen schon so lang dauert, wie lang wird das für 62 brauchen?
Die Farbe des Scrollbalkens scheint recht „sensibel“ zu sein. Ich hab jetzt versucht, sie der HP anzupassen; war ein wenig Tüftelei (besonders auch wegen der häufigen JS-Fehler).
Jetzt noch eine blöde Frage:
Brauche ich das Script, das Du in der ersten Antwort geschrieben hast, dann noch irgendwo?
Gruß und nochmal Sternchen
Hanna
Hallo Hanna,
als blutiger HTML-Anfänger weiß ich nicht, wie ich Bilder
preloaden kann.
Wofuer vorladen?
Wenn Du zB nur willst, dass ein Bild auf der zweiten Seite Deiner Site schneller erscheint, dann reicht es, dass vorzuladende Bild eine Seite vorher mit height und width=„1“ irgendwo, wo es das Layout nicht zerstoert einzubinden. - also unten am Rand oder so.
Wenn Du eine Diashow anbieten willst und die Bilder jeweils schnell da sein sollen, kannst Du das auch auf jeder Seite mit Bild jeweils mit dem naechsten machen - hab ich auf http://www.haus-feemke.de bei der Diasho der Bilder aus der Umgebung so gemacht - da ist jedes Bild recht schnell da, weil es auf der Seite vorher vorgeladen wird.
Wenn Du Bilder zB fuer einen Mouse-Over-Effekt vorladen willst, bietet es sich an, die Bilder auch gleich im Javascript vorzuladen.
Einfacher als die schon vorgestellte Loesung (vielleicht programmiertechnisch nicht so elegant) ist folgendes:
\<!--
i1 = new Image();
i1.src = "grafik1.gif";
i2 = new Image();
i2.src = "grafik2.gif";
usw
usw
//--\>
fuer jedes Bild, das Du vorladen willst im Head der Datei.
Alternativ würde ich auch komprimieren akzeptieren (hab mal
gehört, sowas geht).
klar, Bilder solltest Du eh so eit es eben geht komprimieren, wenn Du sie ins Netz stellst.
Am besten geht das mit Grafikprogrammen, die Dir eine VOrschau bieten, die Dir sofort anzeigt, wie weit die Qualitaet bei verschiedenen Kompresionsstufen leidet.
Der Smart Saver von Ulead tut sogar nichts anderes.
Photoshop hats natuerlich auch, wie weit die anderen Programme das inzwischen anbieten weiss ich leider nicht.
Wenn Du keine Vorschau hast wuerde ich so vorgehen:
Grafiken mit wenigen Farben und klaren Formen, ohne Farbverlaeufe speichere ich als GIF,
Fotos und Grafiken mit Farbverlaeufen als JPG.
GIF:
Versuch, so weit wie moeglich die Farben zu reduzieren, ohne dass die Quaslitaet leidet.
Je weniger Farben, dest kleiner die Datei.
JPG:
Versuch verschiedene Kompressionsstufen und schau Dir das Ergebnis an - irgendwann treten haessliche wuerfelfoermige Verzerrungen im Bild auf, dann wars zu viel.
Arbeite immer mit einer Kopie Deines Originalbildes
Verluste, die beim Komprimieen entstanden sind, lassen sich nie wiederherstellen.
In manchen Grafikprogrammen musst Du Dein Bild erst einmal neu oeffnen, um die Unterschiede zu sehen - in dem Fall also speichern - schliessen - oeffnen.
In der Tat, The Truth Is Out There …
Beide unten vorgeschlagenen Methoden funktionieren mit an Sicherheit grenzender Wahrscheinlichkeit nicht!!!
Im ersten Fall kannst man nicht per width=„1“ height=„1“ (oder so) die Bilder einer Seite zuvor vorladen um sie dann auch der eigentlichen Seite später schneller anzeigen zu lassen. Das funzt nicht, weil der http-Path im Cache verschieden ist und das jeweilige Bild wird doppelt oder mehrfach im Cache gehalten. So oft eben, wie es auf den unterschiedlichen Seiten angezeigt werden soll.
Beide Vorschläge gehen also nicht, weil schon mal der absolute Path auf die Images nicht angeben wurde.
Auf der Seite, auf der die Images vorgeladen werden sollen, holt man sich den absoluten http-Path und ergänzt ihn relativ gemäss des Pfades zu den Seiten, wo die Bilden dann letztendlich angezeigt werden sollen.
Im zweiten Beispiel wird garnicht getestet, ob das Bild geladen werden konnte, oder ob es noch am Laden ist usw. Das Vorladen bricht somit dann ab, wenn der User schon weiter klickt.
So geht es perfekt:
Beim Laden der Seite, auf der Vorgeladen werden soll, fängt man den onload-event ab, die ueber init() die loadImages() Methode aufruft:
var aryImgSrc = new Array(); // Array of preloaded image source
var cntLoaded = 0; // Count of loaded images
var maxToLoad = 0; // Max count of images to load
function loadImages(prmPreloadAry)
{
maxToLoad = prmPreloadAry.length;
for (var i=0; i
imgPreloadAry ist das Array mit den Bildern ueber absolute Pfade angeben. Also nicht die Sourcen der Bilder, sondern nur die Pfade zu den Bildern als Strings wo sie im Web liegen. Dies kann man in einer externen js-Datei vorgeben, was auszugsweise so aussieht:
var baseDomain = "http://www.myDomain.de/";
var baseBackGrd = baseDomain + "backgrd/";
var baseGif = baseDomain + "gif/";
var imgPreloadAry = new Array();
imgPreloadAry[imgPreloadAry.length] = baseBackGrd + "backat.gif";
imgPreloadAry[imgPreloadAry.length] = baseBackGrd + "globe.jpg";
imgPreloadAry[imgPreloadAry.length] = baseGif + "back.gif";
imgPreloadAry[imgPreloadAry.length] = baseGif + "backbtn.gif";
...
Die Methode loadImages() ruft gemäss den oben angegebenen events updateLoadBar() auf:
function updateLoadBar()
{
cntLoaded++;
var strPercent = " ("+Math.round(100\*cntLoaded/maxToLoad)+"%)";
window.status = "Loading Image "+cntLoaded+"/"+maxToLoad+" "+strPercent;
// Do more effects here if you want
if (cntLoaded==maxToLoad) finishLoadBar();
}
In updateLoadBar() wird der Zustand der tatsächlich geladenen Bilder in der Status-Zeile angeben.
Dort kann man auch einen grafischen Anzeige (loadbar) realisieren.
Wurden alle Bilder mehr oder weniger erfolgreich geladen, dann wird finishLoadBar() um die events, die beim Laden jedes Bildes auftreten, zu terminieren:
function finishLoadBar()
{
for (var i=0; i
Das Array mit den Image-Strings legt man am besten in eine extra js-Datei, z.B. imgsource.js.
Obiges in eine zweite z.B. preload.js.
Auf der Seite, auf der vorgaden werden soll steht dann z.B. folgendes:
Das Laden der Strings in imgsource.js als reine Text-Datei geht praktisch ohne Verzögerung.
Anstall "window.onload = ..." in "preload.js" kann man auch in der HTML-Datei im body-tag auch onLoad="init();
schreiben.
In der Tat, The Truth Is Out There …
Was bist denn Du für einer? immer noch besser als LMA².
Beide Vorschläge gehen also nicht, weil schon mal der absolute
Path auf die Images nicht angeben wurde.
Viel Ahnung von wenig.
So geht es perfekt:
Bla…