Ankündigung

Einklappen
Keine Ankündigung bisher.

Wie kann man Bilder vom Browser Cache löschen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Wie kann man Bilder vom Browser Cache löschen

    Hallo

    Per Ajax croppe ich Bilder und wechsle die gecroppten Bilder mit den alten aus. Jedoch sind die alten Bilder noch im Browser Cache und deshalb werden die neuen Bilder nicht angezeigt. Denn Namen der Bilder möchte ich jedoch nicht wechseln.

    Hat den da jemand eine Idee, wie ich das anstellen kann?

    Habe auch schon recherchiert, bei den meisten Lösungen haben zusätzlich "?time" an den Dateinamen angefügt. Jedoch finde ich dies nicht so toll und habe es auch nicht getestet ob dies wirklich funktioniert.

    Besten Dank im voraus.

  • #2
    Du kannst mit JavaScript nicht den Cache löschen.

    Kommentar


    • #3
      Du kannst höchstens die URL des Bildes um einen Parameter ergänzen, der dann den Cache umgeht. Beispielsweise mit einem aktuellen Timestamp wie image.jpg?2738485748

      Kommentar


      • #4
        Du kannst höchstens die URL des Bildes um einen Parameter ergänzen, der dann den Cache umgeht. Beispielsweise mit einem aktuellen Timestamp wie image.jpg?2738485748
        Dann muss ich es doch auf diese Weise versuchen. Danke Euch vielmals.

        Kommentar


        • #5
          Du kannst höchstens die URL des Bildes um einen Parameter ergänzen, der dann den Cache umgeht. Beispielsweise mit einem aktuellen Timestamp wie image.jpg?2738485748
          Klappt ganz gut.


          Nun das Ganze ist irgendwie doch nicht optimal. Beispiel: Im Backend wird eine Bild neu "gecropt". Im Frontend hingegen würde trotzdem noch das alte Bild erscheinen weil im Browser Cache.

          Nun könnte ich natürlich das gleiche machen mit einem Parameter ergänzen. Die Frage hätte das irgenwelche SEO Auswirkungen? Ich wollte eben den Namen des Bildes nicht ändern weil es möglicherweise von Suchmaschinen indexiert ist.

          Doch da Frage ich mich jetzt schon was denn Besser ist.


          1. Wenn Bild neu "gecropt" wird, Bildnamen ändern.

          Nachteil: Indexiertes Bild bei Suchmaschinen geht verloren.
          Vorteil: Caching Problem gelöst.




          2. Wenn Bild neu "gecropt" wird gleicher Namen beibeghalten.

          Nachteil: Evtl Auswirkungen SEO weil zusätzlicher Bild Parameter.
          Vorteil: Indexiertes Bild bei Suchmaschinen bleibt bestehen. Jedoch welche Version???


          Hoffe mir kann das jemand seine Erfahrungen mitteilen. Besten Dank im voraus

          Kommentar


          • #6
            Wenn du ein Bild veränderst, ist es nicht mehr das gleiche Bild. Wenn etwas bei Suchmaschinen verloren geht, dann wird es irgendwann auch wieder neu indiziert. Und nur dadurch, dass du einen Parameter an ein Bild hängst, geht es nicht verloren. Google erkennt in dem Moment das neue Bild, wo es feststellt, dass der Link zum alten Bild nicht mehr existiert.

            Ich lege bei mir tatsächlich jedes Bild immer unter einem neuen Dateinamen ab. Muss man aber nicht - das hat bei mir technische Gründe.

            Kommentar


            • #7
              Danke Dir Rkr für die Erläuterung.

              So wie ich dich verstehe, wenn man einen Parameter anhängt, weiss Google, dass der alte Link nicht mehr existiert, hat aber gerade einen neuen Link, ähnlich wie ein:

              PHP-Code:
              header("HTTP/1.1 301 Moved Permanently");
              header("Location: /new-location");
              exit(); 

              Kommentar


              • #8
                Zitat von rkr Beitrag anzeigen
                Du kannst höchstens die URL des Bildes um einen Parameter ergänzen, der dann den Cache umgeht. Beispielsweise mit einem aktuellen Timestamp wie image.jpg?2738485748
                Hiermit holt der Browser immer das Bild neu vom Server. Das kann jedoch auch so gestaltet werden, das z.B. nur jede Stunde das Bild einmal neu geholt wird.
                Mehr dazu s. Browsercache clever nutzen.

                Kommentar


                • #9
                  Danke Dir für den Link jspit.

                  Ich habe mir eine File Klasse geschrieben welche auch eine Methode hat um einen neuen Namen zu generieren:

                  PHP-Code:
                  /**
                   * Creates a unique file.
                   *
                   * @return string The unique file.
                   */
                  public function createUniqueFile(): string {

                      if (
                  $this->isFile()) {

                          
                  $this->filenameCounter++;
                          
                  $this->setFilename($this->filenameOrg.'_'.$this->filenameCounter);
                          return 
                  $this->createUniqueFile();

                      } else {
                          
                  $this->filenameCounter 0;
                          return 
                  $this->file;
                      }

                  Passe den allerdings gerade an ob man statt den counter einen timestamp verwenden möchte.

                  Kommentar


                  • #10
                    Habe das im Netz gefunden und ist, wie ich finde, eine gute Lösung. Spart weiteren unnötigen Aufwand.
                    PHP-Code:
                      echo <img  src='Images/image.png?" . filemtime('Images/image.png') . "'  />"; 
                    Das Bild kann im Cache bleiben und wird von dort geholt bis sich das Datum ändert. Das Datum ändert sich wenn das Bild getauscht wird (modificated), bis dahin wird es aus dem Cache geholt, danach erneut heruntergeladen, da das Datum nicht mehr stimmt.

                    Tolle Idee..

                    Kommentar


                    • #11
                      Danke Protestix für diese Lösung. Ist aber für ein picture element zu umständlich. Den da können beliebig viele sources sein und diese müsste mann vorher alle mit filemtime versehen.

                      Korrektur: ne würde einfach gehen. Danke.


                      Update: ich habe nun mich doch für einen Timestamp entschieden anstatt einen counter. Und somit ist das Caching Problem auch gegesen. Finde es so am saubersten.

                      PHP-Code:
                      /**
                       * Creates a unique file.
                       *
                       * @return string The unique file.
                       */
                      public function createUniqueFile(): string {

                          if (
                      $this->isFile()) {

                              
                      $dateTime = new DateTime();
                              
                      $this->setFilename($this->filenameOrg.'_'.$dateTime->format('Y-m-d-H-i-s'));
                              return 
                      $this->createUniqueFile();

                          } else {
                              return 
                      $this->file;
                          }

                      Kommentar


                      • #12
                        Vorab ich überblicke dein Code nicht, kann mir aber nicht so richtig vorstellen, das ein rekursiver Aufruf von createUniqueFile() in der selben Methode Sinn macht.

                        Kommentar


                        • #13
                          kann mir aber nicht so richtig vorstellen, das ein rekursiver Aufruf von createUniqueFile() in der selben Methode Sinn macht.
                          Ja kann man sich jetzt streiten ob der da hin gehört oder nicht. Für mich passt es auf jeden fall. Habe aber die recursive methode noch abgeändert.


                          Aber ein Beispiel: In meiner "ImgCreator" Klasse, erstelle ich ein File Object und je nach Settings wir eben eine neues Bild generiert welches nicht existiert. Die File Klasse beinhaltet eben auch methoden wie delete, copy, isReadable etc.

                          Und glaube mir diese File Klasse ist durchaus sehr nützlich.

                          Sehr gekürzter Code:
                          PHP-Code:
                          class ImgCreator {

                              public function 
                          save(string $filename) {

                                  
                          $file = new File($filename);


                                  if (! 
                          $file->isHtmlImage()) { // equal to $file->isImage(['gif', 'jpeg', 'png', 'webp'])

                                      // do sth
                                  
                          }

                                  
                          // Check if filename can be overwriten.
                                  
                          if ($this->allowOverwrite === false) {

                                      
                          $filename $file->createUniqueFile();
                                  }


                              }


                          Und so sieht jetzt die geänderte Methode aus.

                          PHP-Code:
                          public function createUniqueFile(): string {

                              if (
                          $this->isFile()) {

                                  
                          $this->setFilename($this->generateTimestampFilename($this->filenameOrg));
                                  return 
                          $this->createUniqueFile();

                              } else {
                                  return 
                          $this->file;
                              }
                          }

                          private function 
                          generateTimestampFilename(string $filename): string {

                              
                          $date = new DateTime();
                              
                          $pos strrpos($filename'_');

                              
                          // check if there is already a timestamp.
                              
                          if ($pos !== false) {

                                  
                          $end substr($filename$pos+1);

                                  if (
                          $end !== false) {

                                      if (
                          is_numeric($end)) {

                                          if (
                          strlen($end) === 10) {

                                              
                          $filenamePart substr($filename0$pos);

                                              if (
                          $filenamePart !== false) {

                                                  return 
                          $filenamePart.'_'.$date->getTimestamp();
                                              }
                                          }
                                      }
                                  }
                              }

                              return 
                          $filename.'_'.$date->getTimestamp();

                          Kommentar


                          • #14
                            Deine Methode generateTimestampFilename() liefert doch für die Dauer bis zu 1 Sekunde immer den gleichen Dateinamen.
                            Sofern $this->isFile() erfüllt ist (Kenne dein File-Objekt nicht) dürfte in createUniqueFile() auch der rekursive Aufruf laufen.
                            Kann oder wird so sein, das du dies irgendwo abfängst oder der Fall bei dir nicht eintritt.
                            Ich selbst meide Rekursionen im eigenen Code wo es möglich ist, da sie schnell mal einiges an Speicher verbraten, und versuche das mit RecursiveIteratoren zu lösen.
                            Dies alles gehört aber nicht mehr zum Thema hier und ich denke wir belassen es dabei.

                            LG jspit

                            Kommentar


                            • #15
                              Deine Methode createUniqueFile ist falsch benannt, denn sie erstellt keine eindeutige Datei sondern einen eindeutigen Dateinamen.

                              Außerden enthlt diese unnötige Rekursion.

                              PHP-Code:
                                 public function createUniqueFileName() : string
                                 
                              {

                                    if ( 
                              $this->isFile() )
                                    {
                                        
                              $this->setFilename($this->generateTimestampFilename($this->filenameOrg));
                                    }

                                    return 
                              $this->file;

                                 } 
                              macht das selbe ohne Rekursion

                              wobei das auch noch nicht optimal ist. isFile sollte hasFileName heissen, setFileName sollte im Fehlerfall eine Exception werfen oder zumindest zurückgeben ob die aktion erfolgreich war.

                              Kommentar

                              Lädt...
                              X