pcworld: Diashow: Im Voraus geladene Bilder werden erneut geladen

SELF-Forum

Diashow: Im Voraus geladene Bilder werden erneut geladen

pcworld
– Informationen zu den Bewertungsregeln

Hallo!

Ich habe eine Diashow mit JavaScript erstellt.
Die ganzen Bilder sollen alle, bevor sie angezeigt werden, schon geladen werden. Das tun sie auch.
Doch wenn mit der Blätter-Funktion der Diashow weitergeblättert wird, wird das Bild noch einmal vom Server heruntergeladen, obwohl es im Cache des Browsers noch gespeichert sein müsste.
Hab es mit Firefox und dem Live HTTP Headers-Plugin getestet.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<title>Diashow-Problem</title>  
<script type="text/javascript">  
var Bild = new Array();  
  
Bild[0] = "http://www.abload.de/img/1_snapshotpi7lxdcc.png";  
Bild[1] = "http://www.abload.de/img/updater3kip8ck3.png";  
Bild[2] = "http://www.abload.de/img/1_snapshotg4r.png";  
  
var img = new Array();  
var aTag;  
var imgTag;  
  
var bildbereich;  
var zeige = 0;  
  
function Blaettern (Richtung) {  
  zeige = zeige + Richtung;  
  if (zeige > Bild.length - 1) {  
    zeige = 0;  
  } else if (zeige < 0) {  
    zeige = Bild.length - 1;  
  }  
   showPic();  
}  
  
function showPic() {  
 aTag.href = Bild[zeige];  
 imgTag.src = img[zeige].src;  
}  
  
function Init () {  
 bildbereich = document.getElementById("Bildbereich");  
  
 aTag = document.createElement("a");  
 aTag.target = "_blank";  
 imgTag = document.createElement("img");  
 imgTag.alt = "Bild";  
 imgTag.border = "border: 0px;";  
 aTag.appendChild(imgTag);  
 bildbereich.appendChild(aTag);  
  
 for(var i = 0; i < Bild.length; i++) {  
  img[i] = new Image();  
  img[i].src = Bild[i];  
 }  
  
 showPic();  
}  
</script>  
<style type="text/css">  
body { color:black; background-color:white; }  
</style>  
  
</head>  
<body onload="Init();">  
  
<div id="Navigationsbereich">  
[<a href="javascript:Blaettern(-1)">&lt;&lt;</a>]  
[<a href="javascript:Blaettern(1)">&gt;&gt;</a>]  
</div>  
  
<div id="Bildbereich"></div>  
  
</body>  
</html>

Kann mir jemand weiterhelfen?

Gruß,
pcworld

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Diashow: Im Voraus geladene Bilder werden erneut geladen

    ChrisB
    +3 Informationen zu den Bewertungsregeln

    Hi,

    Die ganzen Bilder sollen alle, bevor sie angezeigt werden, schon geladen werden. Das tun sie auch.
    Doch wenn mit der Blätter-Funktion der Diashow weitergeblättert wird, wird das Bild noch einmal vom Server heruntergeladen, obwohl es im Cache des Browsers noch gespeichert sein müsste.
    Hab es mit Firefox und dem Live HTTP Headers-Plugin getestet.

    Bild[0] = "http://www.abload.de/img/1_snapshotpi7lxdcc.png";
    Bild[1] = "http://www.abload.de/img/updater3kip8ck3.png";
    Bild[2] = "http://www.abload.de/img/1_snapshotg4r.png";

    Alle diese Adressen liefern nicht direkt die Bilddaten aus, sondern leiten erst mal per 302 Found Location-Header auf die eigentliche Bildadresse weiter.

    Beispiel fuer's erste Bild:
    http://web-sniffer.net/?url=http%3A%2F%2Fwww.abload.de%2Fimg%2F1_snapshotpi7lxdcc.png
    HTTP Status Code: HTTP/1.1 302 Found
    Location: http://img3.abload.de/img/1_snapshotpi7lxdcc.png

    Diese Ressource liefert dann die eigentlichen Bilddaten, und wird auch mit einem ETAG und einem Last-Modified Header ausgeliefert (http://web-sniffer.net/?url=http%3A%2F%2Fimg3.abload.de%2Fimg%2F1_snapshotpi7lxdcc.png), was eigentlich Caching bewirken sollte.

    Aber die urspruenglich angeforderte, weiterleitende Adresse macht keine Angaben, dass ihr Ergebnis gecached werden soll.

    Probiere es mal damit, die Adressen, auf die letztendlich weitergeleitet wird, als Bildadressen im Script anzugeben.
    Damit kannst du natuerlich u.U. dann mal auf die Nase fallen, wenn der Anbieter sich irgendwann entscheidet, die Bilder nicht mehr ueber diese Adresse auszuliefern, sondern ueber eine neue, auf die dann wieder entsprechend weitergeleitet wuerde.

    MfG ChrisB

    --
    „This is the author's opinion, not necessarily that of Starbucks.“
    Beitrag melden
    +3
    Informationen zu den Bewertungsregeln

    1. Diashow: Im Voraus geladene Bilder werden erneut geladen

      pcworld
      – Informationen zu den Bewertungsregeln

      Danke!

      Jetzt funktioniert es, wenn ich die weitergeleiteten URLs angebe:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<title>Diashow-Problem</title>  
<script type="text/javascript">  
var Bild = new Array();  
  
Bild[0] = "http://img3.abload.de/img/1_snapshotpi7lxdcc.png";  
Bild[1] = "http://img3.abload.de/img/updater3kip8ck3.png";  
Bild[2] = "http://img3.abload.de/img/1_snapshotg4r.png";  
  
var img = new Array();  
var aTag;  
var imgTag;  
  
var bildbereich;  
var zeige = 0;  
  
function Blaettern (Richtung) {  
  zeige = zeige + Richtung;  
  if (zeige > Bild.length - 1) {  
    zeige = 0;  
  } else if (zeige < 0) {  
    zeige = Bild.length - 1;  
  }  
   showPic();  
}  
  
function showPic() {  
 aTag.href = Bild[zeige];  
 imgTag.src = img[zeige].src;  
}  
  
function Init () {  
 bildbereich = document.getElementById("Bildbereich");  
  
 aTag = document.createElement("a");  
 aTag.target = "_blank";  
 imgTag = document.createElement("img");  
 imgTag.alt = "Bild";  
 imgTag.border = "border: 0px;";  
 aTag.appendChild(imgTag);  
 bildbereich.appendChild(aTag);  
  
 for(var i = 0; i < Bild.length; i++) {  
  img[i] = new Image();  
  img[i].src = Bild[i];  
 }  
  
 showPic();  
}  
</script>  
<style type="text/css">  
body { color:black; background-color:white; }  
</style>  
  
</head>  
<body onload="Init();">  
  
<div id="Navigationsbereich">  
[<a href="javascript:Blaettern(-1)">&lt;&lt;</a>]  
[<a href="javascript:Blaettern(1)">&gt;&gt;</a>]  
</div>  
  
<div id="Bildbereich"></div>  
  
</body>  
</html>

      Gibt es per JavaScript eine Möglichkeit, dass ich prüfen kann, wohin die URL weitergeleitet wird? Also dass "Location: ..." aus den Header-Daten abgefragt wird?

      Gruß,
      pcworld

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Diashow: Im Voraus geladene Bilder werden erneut geladen

        levu Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo,

        Gibt es per JavaScript eine Möglichkeit, dass ich prüfen kann, wohin die URL weitergeleitet wird? Also dass "Location: ..." aus den Header-Daten abgefragt wird?

        Ja, beim XMLHttpRequest-Object kannst du die header auslesen...

        mfg, Flo

        --
        sh:) fo:| ch:? rl:( br:^ n4:| ie:{ mo:| va:} de:> zu:} fl:{ ss:) ls:< js:|
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Diashow: Im Voraus geladene Bilder werden erneut geladen

          pcworld Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hallo!

          Eigentlich müsste es doch die Möglichkeit geben, dass ich das Bild über document.images aufrufe und dann durch das schon geladene Image-Objekt ersetze.
          Hab es mal so versucht:
          Das Bild hat die ID "img" erhalten.

          document.images["img"] = img[zeige];

          Jedoch wird nur der Alternativ-Text angezeigt. In der Firefox-Fehlerkonsole ist keine Fehlermeldung vorzufinden.

          Mein aktueller Code:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<title>Diashow-Problem</title>  
<script type="text/javascript">  
var Bild = new Array();  
Bild[0] = "http://www.abload.de/img/1_snapshotpi7lxdcc.png";  
Bild[1] = "http://www.abload.de/img/updater3kip8ck3.png";  
Bild[2] = "http://www.abload.de/img/1_snapshotg4r.png";  
  
var img = new Array();  
var aTag;  
var imgTag;  
  
var bildbereich;  
var zeige = 0;  
  
function Blaettern (Richtung) {  
  zeige = zeige + Richtung;  
  if (zeige > Bild.length - 1) {  
    zeige = 0;  
  } else if (zeige < 0) {  
    zeige = Bild.length - 1;  
  }  
   showPic();  
}  
  
function showPic() {  
 aTag.href = Bild[zeige];  
 document.images["img"] = img[zeige];  
}  
  
function Init () {  
 bildbereich = document.getElementById("Bildbereich");  
  
 aTag = document.createElement("a");  
 aTag.target = "_blank";  
 imgTag = document.createElement("img");  
 imgTag.id = "img";  
 imgTag.alt = "Bild";  
 imgTag.border = "0";  
 aTag.appendChild(imgTag);  
 bildbereich.appendChild(aTag);  
  
 for(var i = 0; i < Bild.length; i++) {  
  img[i] = new Image();  
  img[i].src = Bild[i];  
 }  
  
 showPic();  
}  
</script>  
<style type="text/css">  
body { color:black; background-color:white; }  
</style>  
  
</head>  
<body onload="Init();">  
  
<div id="Navigationsbereich">  
[<a href="javascript:Blaettern(-1)">&lt;&lt;</a>]  
[<a href="javascript:Blaettern(1)">&gt;&gt;</a>]  
</div>  
  
<div id="Bildbereich"></div>  
  
</body>  
</html>

          Funktioniert das irgendwie, dass ich über document.images das aktuelle Image-Objekt ersetze?

          Gruß,
          pcworld

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Diashow: Im Voraus geladene Bilder werden erneut geladen

            ChrisB
            – Informationen zu den Bewertungsregeln

            Hi,

            Eigentlich müsste es doch die Möglichkeit geben, dass ich das Bild über document.images aufrufe und dann durch das schon geladene Image-Objekt ersetze.
            Hab es mal so versucht:
            Das Bild hat die ID "img" erhalten.

            document.images["img"] = img[zeige];

            Damit referenzierst du jeweils auf die JavaScript-Repraesentation der Bildobjekte - aber damit kannst du das HTML-Element, welches das erste Bild darstellt, nicht so einfach austauschen.

            Du kannst aber die Bildquelle austauschen, in dem du der src-Eigenschaft des einen Bildes die des anderen zuweist:

            document.images["img"].src = img[zeige].src;

            MfG ChrisB

            --
            „This is the author's opinion, not necessarily that of Starbucks.“
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Diashow: Im Voraus geladene Bilder werden erneut geladen

              pcworld Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Hallo!

              document.images["img"].src = img[zeige].src;

              Dann habe ich genau wieder das Problem, dass das Bild neu geladen wird.

              Ich will ja darauf rausgehen, dass ich die URL angeben kann, die dann den Location-Header schickt - und später nicht mehr geladen werden muss.

              Wird bei diesem XMLHttpRequest AJAX benutzt? Weil dann dürfte es nicht funktionieren, weil die Bilder auf einem anderen Server liegen - und die Anzeige wird dann entsprechend blockiert (zumindest bei Firefox).

              Gruß,
              pcworld

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Diashow: Im Voraus geladene Bilder werden erneut geladen

                ChrisB
                +2 Informationen zu den Bewertungsregeln

                Hi,

                Wird bei diesem XMLHttpRequest AJAX benutzt? Weil dann dürfte es nicht funktionieren, weil die Bilder auf einem anderen Server liegen - und die Anzeige wird dann entsprechend blockiert (zumindest bei Firefox).

                "AJAX" *ist* im Wesentlichen die Verwendung des XMLHttpRequest-Objektes, ja.

                document.images["img"].src = img[zeige].src;

                Dann habe ich genau wieder das Problem, dass das Bild neu geladen wird.

                Ich will ja darauf rausgehen, dass ich die URL angeben kann, die dann den Location-Header schickt - und später nicht mehr geladen werden muss.

                OK, ja; dann bliebe dir wohl hoechstens noch, die Bilder bereits direkt ins Dokument einzubinden (<img>-Objekte ins DOM einfuegen, zunaechst unsichtbar [nicht per display:none, dann laden manche Browser sie noch gar nicht; besser per absoluter Positionierung ausserhalb des sichtbaren Bereiches platziert]) - und dann wirklich die HTML-Bildobjekte ueber Aenderung der Positionierung "sichtbar" zu machen, oder ueber Austausch der Bildobjekte im DOM-Baum (appendChild, insertBefore, removeChild). Das waere die letzte Moeglichkeit, die ich da noch sehe, um einen Browser eventuell vom Neuladen abhalten zu koennen.

                MfG ChrisB

                --
                „This is the author's opinion, not necessarily that of Starbucks.“
                Beitrag melden
                +2
                Informationen zu den Bewertungsregeln

                1. Diashow: Im Voraus geladene Bilder werden erneut geladen

                  pcworld Homepage des Autors
                  – Informationen zu den Bewertungsregeln

                  Hallo!

                  besser per absoluter Positionierung ausserhalb des sichtbaren Bereiches platziert

                  Wie stelle ich das an?

                  Gruß,
                  pcworld

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Diashow: Im Voraus geladene Bilder werden erneut geladen

                    ChrisB
                    – Informationen zu den Bewertungsregeln

                    Hi,

                    besser per absoluter Positionierung ausserhalb des sichtbaren Bereiches platziert

                    Wie stelle ich das an?

                    Mit negativen top- und/oder left-Werten.

                    MfG ChrisB

                    --
                    „This is the author's opinion, not necessarily that of Starbucks.“
                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln