nicht angemeldet
preload durch new Image() verhindern
Hallo,
ich habe eie Bildergallerie auf meiner Website. Das Ganze funktioniert über ein Javascript. Es werden die kleinen bilder angezeigt, und wenn man ein Bild anklickt, wird das in groß in einem Pop-up Fenster (Größe wie das Bild) angezeigt. Klickt man woanders hin, schließt sich das Fenster automatisch wieder.
Nun ist da folgendes Problem. Es dauert immer ewig, bis die Seiten geladen sind, da er die Bilder, die "hinter den Thumbs stecken", vorlädt (unnötiger Traffic sollte ja eigentlich durch die kleinen Vorschaubilder vermieden werden). Das ist besonders auf einer Seite sehr nervig, da sich dort mehrere sehr große GIFs dahinter verbergen (500 kb).
Wie ich mittlerweile herausgefunden habe, ist das new Image() der Grund dafür.
Leider kenne ich mich mit Javascript nicht sonderlich aus. Um ehrlich zu sein, so gut wie gar nicht. Deshalb bitte ich euch um Hilfe.
Wie kann ich das preload der großen Bilder verhindern?
Hier das aktuelle Script:
var MyImages = new Array("bilder/1g.gif","bilder/2g.gif","bilder/3g.gif")
// 'Die Bilder (bzw.der Bilderpfad als Textstring) werden in eine Array geladen
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(); // hier wäre auch document.images[i] möglich gewesen
ImagesProp[i].src=MyImages[i];
}
function Bildfenster(pic) {
// Als Übergabeparameter wird die Zahl mitgeführt an derer Stelle das Bild im ersten Array als Text steht
var fensterbreite, fensterhoehe, bildschirmbreite, bildschirmhoehe, fenstereigenschaft;
bildschirmbreite=screen.width;
bildschirmhoehe=screen.height;
fensterbreite=ImagesProp[pic].width;
fensterhoehe=ImagesProp[pic].height;
fenstereigenschaft="left=" +(bildschirmbreite-fensterbreite)/2+ ", top=5, height="+fensterhoehe + ", width="+fensterbreite;
fenster=window.open("","",fenstereigenschaft);
fenster.focus();
fenster.document.open(); // Hier wird ein neues Fenster "on the Fly" erzeugt
with (fenster) {
document.write('<html><head>');
document.write("<script language='JavaScript'>");
document.write("function click() { window.close(); } "); // bei click auf das Fenster wird es geschlossen
document.write("document.onmousedown=click ");
document.write("</script>");
document.write('<title>© meine Bilder</title></head>');
document.write('<body onblur="window.close()" '); // Wenn das Fenster den Focus verliert wird es auch geschlossen
document.write('marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">');
document.write('<center>');
document.write('<img src="'+ MyImages[pic] +'"border="0">');
document.write('<center>');
document.write('</body></html>');
fenster.document.close();
}
}
In der Datei werden die bilder wie folgt geladen:
<a href="Javascript:Bildfenster(0);"><img src="1.gif" width="180" border="0" alt="Bild 1" />
Vielen Dank für eure Hilfe!
-
hi,
Wie ich mittlerweile herausgefunden habe, ist das new Image() der Grund dafür.
Natürlich - wenn du Javascript sagst, es soll ein neues Bildobjekt erstellen, und diesem eine src zuweist - dann wird versucht, das Bild zu laden.
Wie kann ich das preload der großen Bilder verhindern?
In dem du den folgenden Teil rauswirfst aus deinem Script:
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(); // hier wäre auch document.images[i] möglich gewesen
ImagesProp[i].src=MyImages[i];
}Sei dir dabei aber bewusst, dass innerhalb deiner Funktion Bildfenster dann das Bestimmen der Fenstermaße passend zum Bild:
fensterbreite=ImagesProp[pic].width;
fensterhoehe=ImagesProp[pic].height;nicht mehr so funktionieren wird [1] - von ungeladenen Bildern kann Javascript die Größe nun mal nicht raten.
[1] Dieser Zeilen _müssen_ also auch raus, weil ImagesProp nicht existiert, und es ansonsten Fehler geben würde.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga!
danke für deine Hilfe. Das funktioniert schonmal. :) Wie du aber shcon sagtest, funktioniert jetzt die Sache mit dem Anpassen des Fensters an die Bildgröße nicht mehr. Wie kann ich das Popup-Fenster jetzt zumindest größenmäßig einschränken (z.B. 300 px breit und 200 px hoch)? Und gibt es eine Möglichkeit, das Bild zumindest zu zentrieren?-
Wie kann ich das Popup-Fenster jetzt zumindest größenmäßig einschränken (z.B. 300 px breit und 200 px hoch)?
Das hab ich nun mittlerweile selbst rausgefunden.
var bildschirmbreite, bildschirmhoehe, fenstereigenschaft;
bildschirmbreite=screen.width;
bildschirmhoehe=screen.height;
fenstereigenschaft="left=30, top=30, height=170, width=200"; //left ist der Abstand vom linken Bildschirmrand und top der Abstand zum oberen; height und width geben die Eigenschaften des popupfensters anUnd gibt es eine Möglichkeit, das Bild zumindest zu zentrieren?
Das lässt sich wohl über diesen Teil mit html-codes ändern.
with (fenster) {
document.write('<html><head>');
document.write("<script language='JavaScript'>");
document.write("function click() { window.close(); } "); // bei click auf das Fenster wird es geschlossen
document.write("document.onmousedown=click ");
document.write("</script>");
document.write('<title>© Füchslein</title></head>');
document.write('<body onblur="window.close()" '); // Wenn das Fenster den Focus verliert wird es auch geschlossen
document.write('marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">');
document.write('<center>');
document.write('<img src="'+ MyImages[pic] +'"border="0">');
document.write('<center>');
document.write('</body></html>');Womit ich meine zweite Frage selbst beantwortet hab. Trotzdem nochmal danke!
-
-