Zwischenspeicherung dynamisch geladener Bilder

Question

Zwischenspeicherung dynamisch geladener Bilder

Gefragt el 14 de September, 2010: Wann wurde die Frage gestellt
3890 Ansichten: Anzahl der Besuche der Frage
3 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich benutze Javascript, um dynamisch eine Reihe von Bildern in einem einzigen img-Tag zu laden, basierend auf Benutzerinteraktion:

function reassignImage(newSource)
{
   img.src = newSource;
}

Das funktioniert prima, außer wenn ich es mit den Chrome-Entwicklertools inspiziere, sehe ich, dass selbst wenn ich ein Bild, das ich bereits geladen habe, erneut lade, ein weiterer http-Aufruf erfolgt UND der Graph für die Gesamtgröße der Bilder wächst.

Das scheint das Schlimmste von beidem zu sein. Ich würde beides wollen:

Zum Laden aus dem Cache, wenn das Bild das gleiche wäre.
So laden Sie jedes Bild neu jedes Mal neu zu laden, aber dann den Zwischenspeicher.

Wie würde ich beide Szenarien erreichen?

Danke! Yarin

Gefragt el 14 de September, 2010 von Yarin

Answer 1

3 Antworten

Answer 2

5voto

Nik Punkte 2667

Auf welchen Wert ist der Cache-Control-Header in der http-Antwort für das Bild gesetzt? (Die Chrome-Entwicklertools zeigen es Ihnen). Wenn es nicht auf cachefähig eingestellt ist, wird es neu geholt.

Beantwortet el 14 de September, 2010 von Nik (2667 Punkte )

Answer 3

1voto

Dave Aaron Smith Punkte 4447

Damit wird ein Bild vorgeladen, so dass der Browser es sofort anzeigen kann, wenn Sie die Option src eines img Tag. Ich vermute, dass das Vorladen eines solchen Bildes sicherstellt, dass es sich im Cache befindet und nicht neu geladen wird, obwohl ich es nicht getestet habe.

var myImg = new Image(25, 25);
myImg.src = "/foobar.png";

Mit anderen Worten, es sollten jetzt hoffentlich nur noch zwei Bilder heruntergeladen werden

function reassignImage(newSource) {
    var myImg = new Image(25, 25);
    myImg.src = newSource;
    img.src = newSource;
}

reassignImage("first.png");
reassignImage("second.png");
reassignImage("first.png");

bearbeiten

Ich habe es falsch gemacht. Versuchen Sie die Erstellung einer new Image() für jede neue Datei, die der Benutzer lädt. Tauschen Sie diese Bildelemente in und aus dem Dom aus.

<html>
  <head>
    <script>
    var imageElements = {};
    function reassignImage(newSource) {
      if (typeof imageElements[newSource] == "undefined") {
        imageElements[newSource] = new Image();
        imageElements[newSource].src = newSource;
      }
      var container = document.getElementById("imageContainer");
      container.innerHTML = '';
      container.appendChild(imageElements[newSource]);
    }
    </script>
  </head>
  <body>
    <div id="imageContainer"></div>
  </body>
</html>

Beantwortet el 14 de September, 2010 von Dave Aaron Smith (4447 Punkte )

Answer 4

0voto

Nicht registrierter Benutzer Punkte 0

Technisch gesehen kann man das so einstellen in .htaccess Datei:

# Set up caching on images for 1 month
<FilesMatch "\.(jpg|jpeg|png|ico|gif)$">
ExpiresDefault A2419200
</FilesMatch>

Wenn Sie mit diesen Einstellungen die Aktualisierung des Bildes erzwingen möchten, fügen Sie dies an seine URL an:

'?'+ new Date().getTime()

Beantwortet el 18 de April, 2014 von Nicht registrierter Benutzer (0 Punkte )

Zwischenspeicherung dynamisch geladener Bilder

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Zwischenspeicherung dynamisch geladener Bilder

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: