• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Caching eines Bildes verhindern

T

Travis33

Neues Mitglied
Hallo Profis,

ich möchte gerne verhinden, dass ein Bild (in dem Fall ein GIF, dass per Mouseover durch ein animiertes GIF ersetzt wird) vom Anwender-Browser in den Cache gelegt wird, da das Ablaufen des GIFs sich dann bei einigen Browsern nur auf das letzte Bild der Animationssequenz beschränkt, wenn der Link einmal betätigt wurde. (ein GIF-Loop darf es aber auch nicht sein, da es ja jedes Mal nur einmal laufen soll, aber eben komplett)

Ich habe schon gelesen, dass ein Zufallswert oder Timestamp dazu taugt.
Leider bin ich blutiger Anfänger und komme mit den Platzierungen der Anweisungen (Java) überhaupt nicht klar.

Der Einfachheit halb hier mein Seitenquellcode (aus einem uralten GoLive), den ich bereits mit netter Hilfe seitens anderer erstellt habe:

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>Stefan Seifert Studio</title>
<meta name="description">
<meta name="keywords" content="Seifert, Stefan, workprobes, Grafikdesign">
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript" language="JavaScript"><!--
function aprimi(url,nome,grasso,alto,scroll)
{
var win;
// win variabile locale
mytop=((screen.height-alto)/2)-30;
if (mytop<0) mytop=0;
myleft=((screen.width-grasso)/2)-10;
if (myleft<0) myleft=0;
options="height="+alto+",width="+grasso+",top="+mytop+",left="+myleft+",location=0,directories=0,status=0,resizable=0,toolbar=0,menubar=0";

if (scroll) options=options+",scrollbars=1"
else options=options+",scrollbars=0"

win=window.open(url,nome,options);
win.focus();
return true;
}

function Hintergrund01() {
document.getElementById('zelle').style.backgroundImage="url('Division_weiter_2.gif";
}

function Hintergrund02() {
document.getElementById('zelle').style.backgroundImage="url('Division_weiter.gif";
}
// -->
</script>
</head>

<body bgcolor="#666666" link="#d3d3d3" vlink="#d3d3d3" alink="#d3d3d3">
&nbsp;
<p>
<table border="0" cellpadding="0" cellspacing="2" align="center">
<tr height="19">
<td width="738" height="19" nowrap></td>
</tr>
<tr height="77">
<td width="738" nowrap height="77" valign="top">
<center>
<a href="references.html"><img src="Logo.gif" border="0"></a></center>
</td>
</tr>
<tr height="12">
<td nowrap width="738" height="12">
<center>
<font color="#d3d3d3" face="Georgia" size="2">Tel +49 40 53 79 02 52</font></center>
</td>
</tr>
<tr height="19">
<td width="738" nowrap height="19">
<center>
<font size="1" color="#d3d3d3" face="Georgia">[email protected]</font></center>
</td>
</tr>
<tr height="11">
<td width="738" height="11"></td>
</tr>
<tr height="33">
<td width="738" height="33">
<center>
<table border="0" cellpadding="0" cellspacing="2">
<tr height="53">
<td background="Division_weiter.gif" height="53" width="600" valign="bottom" align="center" id="zelle" onmouseover="javascript:Hintergrund01()" onmouseout="javascript:Hintergrund02()">
<table border="0" cellpadding="0" cellspacing="2"> ....[usw.]


Es geht um das GIF „Division_weiter.gif“, bzw. „Division_weiter_2.gif“, welches mir ein Profi bereits über eine Javafunktion eingebunden hat.
Wie kriege ich die Zusatz-Zufallsfunktion da unter? Irgendwie ein ?s={ZUFALL} hinter den Dateinamen, wobei wohl ZUFALL an irgendeiner Stelle definiert werden muss. Aber wie und wo exakt? Und das für einen Anfänger wie mich.

Hoffe auf Eure Hilfe

Danke
Stefan
 
Hallo, und willkommen im Forum.
Travis33 schrieb:
ich möchte gerne verhinden, dass ein Bild (in dem Fall ein GIF, dass per Mouseover durch ein animiertes GIF ersetzt wird) vom Anwender-Browser in den Cache gelegt wird...
Zum Vergrößern anklicken....
Das lässt sich nicht verhindern, da alles was angezeigt wird, auch im Browser-Cache landet.

Travis33 schrieb:
da das Ablaufen des GIFs sich dann bei einigen Browsern nur auf das letzte Bild der Animationssequenz beschränkt, wenn der Link einmal betätigt wurde.
Zum Vergrößern anklicken....
Das Verhalten eines Gifs lässt sich auch nicht beeinflussen, du kannst nicht mal beeinflussen ob es überhaupt angezeigt wird, da das alles Einstellungssache des Eigentümers des Browsers ist.

Travis33 schrieb:
Ich habe schon gelesen, dass ein Zufallswert oder Timestamp dazu taugt.
Zum Vergrößern anklicken....
Das betrifft lediglich das neue Anfordern der Resource, zum Beispiel bei Änderung einer Datei. Nehmen wir an der Benutzer hat eine neue Version seines Hintergrundbildes hochgeladen, so weiss der Browser ja nicht das es ein neues Hintergrundbild gibt, da bei bei der Anforderung der Seite an den Server, der Browser mitgeteilt bekommt, dass keine Änderung stattfand. Erst wenn auch im Quellcode der angeforderten Seite eine Änderung erfolgte, wird die Seite erneut heruntergeladen. Um das auch bei dem Bild zu erreichen, kann man das Bild umbenennen. Dann und nur dann hat man durch einen neuen Namen eine Veränderung im Quellcode der Seite erzeugt und der Browser erhält eine neue Version dieser Seite. Ist das Bild gar ein Hintergrundbild welches in der CSS-Datei eingebunden wurde, muss man sogar den Namen der CSS-Datei ändern, da ansonsten der Browser diese Änderung nicht mitgeteilt bekommt und die Seite aus dem Cache lädt. Das anfordern eines Bildes über Javascript ändert daran nichts, sofern das Bild auf dem Server sich nicht verändert hat.
Es heisst übrigens in deinem Fall Javascript und nicht Java, da Java wieder eine andere Programmiersprache ist.

Travis33 schrieb:
Der Einfachheit halb hier mein Seitenquellcode (aus einem uralten GoLive),
Zum Vergrößern anklicken....
Das ist nicht zu übersehen.

Was willst du nun erreichen?
 
Zuletzt bearbeitet von einem Moderator:
Dank

Hallo Wustersoss ;-)

Herzlichen Dank für Deine Mühe und die Erklärungen!
Also erreichen will ich auf meiner Site Stefan Seifert Studio
dass das kleine animierte GIF, welches andeutet dass hier eine Art „Seite“ angehoben wird (und damit die Links optisch unterstützt)
sauber abläuft wie beim ersten Mal (es besteht aus 5 kleinen Übergangsschritten: Schattenkante hebt sich an und darunter wird es ein wenig heller)
und nicht nachdem ersten Klicken und zurückkehren nur noch aus dem ersten und letzten Bild besteht, also nunmehr ruckartig nach oben schnellt.
Das klappt auf manchen Browser gut, auf anderen gehts beim zweiten Mal einfach nicht mehr.
Ich hatte gelesen, dass es am Cache liege. Den könne man wiederrum austricksen, indem man dem Bild sozusagen im Geheimen jedesmal einen neuen Namen gibt
(eben über die Zusatzzahl per Zufallsskript), so dass der Browser es wieder neu laden muss.
Vermutlich wirds aber so sein wie Du sagst und es geht schlicht nicht.

Danke jedenfalls für Deine Antwort!

Stefan
 
Travis33 schrieb:
...indem man dem Bild sozusagen im Geheimen jedesmal einen neuen Namen gibt
(eben über die Zusatzzahl per Zufallsskript), so dass der Browser es wieder neu laden muss.
Vermutlich wirds aber so sein wie Du sagst und es geht schlicht nicht...
Zum Vergrößern anklicken....
Das würde ich so nicht abtun.
Du hast dann zwar immer noch alle unüberwindbaren Hürden, die die Browsereinstellungen des jeweiligen Users deinem GIF stellen, aber der Cache sollte so austricksbar sein.
 
Bisschen schwul, das Herzchen :-))

Hey Space Vampire,

Danke also für die Wortmeldung.
Wie würdest Du das in den Wust da oben einbauen?
Kannst Du das vielleicht reinkopieren irgendwie oder rot markieren?
Würde ich zu gern probieren.

Danke
wenn nicht, auch gut
Gruß
 
Folgendes ist ein ungetestetes Workaround!

Da ich nicht weiß, wie dein besagtes GIF heißt, nenne ich es für dieses Beispiel mal fade.gif
Speichere die Datei fade.gif ins Verzeichnis images/

An den Anfang deiner PHP-Datei
PHP: 
<?php
// feststellen ob die Datei schon mal umbenannt wurde
// falls ja, aktuellen Dateinamen aus Log-Datei auslesen
if(file_exists("images/fade_log.txt")){
	$tmp_img = file("images/fade_log.txt");
	$img = $tmp_img[0];
// falls nein, ursprünglicher Dateiname
}else{
	$img = "fade.gif";
}
// Zufallszahl zwischen 1.000.000 und 9.999.999 generieren
$random = rand(1000000, 9999999);
// Dateinamen mit der neuen Zufallszahl modifizieren
rename($img, "fade".$random.".gif");
// Neuen Dateinamen in Log-datei schreiben
$log = fopen("fade_log.txt", "w+");
$new_img = "fade".$random.".gif";
fwrite($log, $new_img);
fclose($log);
?>

Die Ausgabe des Dateinamens im Quelltext erfolgt dann immer mit
PHP: 
<?php echo $new_image; ?>

MERKE: Ich halte den Aufwand für ungerechtfertigt und das Ergebnis für gelinde ausgedrückt problematisch! Besucher, die ihren Cache deaktiviert haben, bekommen das GIF möglicherweise garnicht angezeigt.
Denn das GIF wird erst beim Hovern vom Server angefordert. Wenn inzwischen ein anderer Besucher die Seite aufgerufen hat, ist der Dateiname aber inzwischen ein Anderer!
 
Danke

Danke!

Werde mir das noch einmal durch den Kopf gehen lassen.
Das probier ich aber auf jeden Fall aus!

Danke nochmal

Gruß
Stefan
 
Du kannst diesen Effekt zukünftig auch in CSS lösen mit transitions. Beispiele sind auf Microsoft zu finden:
Hands On: transitions
und auch bei Apple: Apple - HTML5 Showcase - Transitions
Sowie viele Anleitungen im Internet.

Transitions haben keine Cachingprobleme, funktionieren auch mit abgeschalteten Javascript, da es ja CSS3 ist und für deinen Effekt benötigt man auch nur ein Bild.

Aber zuvor solltest du vielleicht deinen Code auf den neusten Stand bringen. So erstellt man heute keine Webseiten mehr.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben