2017-10-26 2 views
1

Hier ist die Situation: Ich muss das Hintergrundbild eines Div auf einer Seite zu einer bestimmten Zeit ändern. Der folgende Code macht genau das und blendet auch die Bilder ein und aus. Problem ist, ich muss die Bilder im Verzeichnis mit Häufigkeit ändern. Die Namen ändern sich nie, aber die Bilder tun es. Wie kann ich den Browser zwingen, Inhalte zu aktualisieren? Bilder werden nicht aktualisiert, selbst wenn ich f5 manuell drücke.Wie Bilder auf einer Seite aktualisiert werden, wenn die ursprünglichen Bilddateien aktualisiert werden

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Esquerdo - Monitores BI</title> 
    <script type="text/javascript" src="//code.jquery.com/jquery-1.5.2.js"></script> 
    <script type="text/javascript"> 
     $(window).load(function(){ 
     $('img').hide(); 
     function test() { 
      $("#container img").first().appendTo('#container').fadeOut(2000); 
      $("#container img").first().fadeIn(2000); 

      setTimeout(test, 7000); 
     } 
      test(); 
     }); 
    </script> 

    <link rel="stylesheet" type="text/css" href="slidestyle2.css"> 
</head> 
<body> 
    <div id="container"> 
     <img src="vehicles/kicks.jpg" /> 
     <img src="vehicles/gtr.jpg" /> 
     <img src="vehicles/sentra.jpg" /> 
    </div> 
</body> 

Ich habe eine Menge für eine Lösung gesucht, aber da ich nichts über jquery wissen, Javascript etc. und alle Lösungen, die ich für sehr unterschiedliche Codes gearbeitet gefunden habe, konnte ich nichts anpassen zu meinen Bedürfnissen. Alles, was ich weiß ist, dass der Browser den ursprünglichen Inhalt einer Datei mit einem bestimmten Namen behält, so dass Sie den Namen der Datei im Code ändern müssen, damit er immer eindeutig ist. Aber wie kann ich das machen, wenn ich den Dateinamen in html schreibe?

Ich würde wirklich jede Hilfe zu schätzen wissen.

+0

Wenn Sie es programmtechnisch tun möchten, müssen Sie der URL des Bildes eine Art eindeutiger Querystring hinzufügen, so dass der Browser jedes Mal neu herunterladen muss [siehe dieses Thema] (https://stackoverflow.com/questions/ 728616/disable-cache-for-some-images) Wenn Sie nur das neue Image ansehen möchten, müssen Sie eine Hard Refresh (Strg + F5) durchführen, um die zwischengespeicherten Dateien erneut zu laden. – Pete

+0

Wie Ihre Beschreibung heißt [caching] (https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching) und Sie können steuern, wie der Browser bestimmte Dateien mit dem ['cache-control'] zwischenspeichert (https: // developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) header – George

Antwort

4

einen Zufallswert am Ende der URL hinzufügen:

$("#container img").first().attr("src", "vehicles/kicks.jpg?" + Math.random()) 

, dass der Browser eine neue Kopie des Bildes erneut abzurufen zwingen werde.

+0

großartig! Zuerst würde ich das –

+0

hören Ich würde wahrscheinlich eine Art von Datum-Zeit-Stempel anstelle von mathematischen Zufall verwenden, da es eine sehr geringe Chance gibt, dass die Zufallszahl eine bereits verwendete sein könnte, da die Datumszeit immer – Pete

+0

wird. Aber ich habe gerade dieses Schnipsel in meiner Konsole ausprobiert: 'für (i = 0; i <30; i ++) {console.log (neues Date(). GetTime())}', und es wird so schnell ausgeführt, dass es die Der gleiche Zeitstempel 21 mal, dann 9 mal der nächste ... Irgendwelche Vorschläge? 'Math.random() + neues Date(). GetTime()' vielleicht? :) –

Verwandte Themen