JS: Grafiken dynamisch aktualisieren

[drunken monkey]

Hi zusammen!

Ist wahrscheinlich eine ziemlich einfache Frage, aber irgendwie hat weder SelfHTML noch die Forensuche was ausgespuckt:

Wie kann man mit Javascript ein Bild dynamisch aktualisieren? Gibt's dafür eine Methode, oder muss man da tricksen? Geht's überhaupt? o_O'

Schon mal muchas gracias im Voraus. ^^

[mitaki]

Was genau verstehst du unter dynamischer Aktualisierung?

Soll das Bild neu geladen werden?

Code:

document.getElementByID('bildID').src = "selbes_bild.ext";

Ich bin mir nicht sicher ob das funktioniert. Aber es sollte einen Versuch Wert sein.

[Lucleonhart]

Nur als bestätigung: Ja, das funktioniert, verwende ich selbst!

[drunken monkey]

Was genau verstehst du unter dynamischer Aktualisierung?

Soll das Bild neu geladen werden?

...

Jepp, genau das meint ich. ^^

Vielen Dank euch beiden, hätte ich eigentlich auch selbst drauf kommen/probieren können! <___<

Edit: Funktioniert doch nicht bei mir. Auch nicht, wenn ich in der Funktion erst src mit irgendwas anderem belege und dann wieder zurück aufs originale ändere. :-/
Kann es irgendwas ausmachen, dass ich kein normales Bild sondern ein PHP-Skript als Quelle habe?

[Manni]

Ich hatte das Problem auch und habe es gelöst, indem ich einfach eine Zufallszahl an das neue Bild angehängt habe: bild.php?foo=bar&273671874

[Lucleonhart]

Hm? Das funzt auch so:
http://www.lucleonhart.de/try/image/image.php ist ein blaues quadrat
http://www.lucleonhart.de/try/image/image2.php ist ein rotes quadrat

http://www.lucleonhart.de/try/image/test.php -> beim klick auf das quadrat wird das andere geladen... (Nur einmal weil super billig production ^^)

[mitaki]

Kann es irgendwas ausmachen, dass ich kein normales Bild sondern ein PHP-Skript als Quelle habe?

...

Nein, normal versendet PHP den bitte-nicht-cachen-Header, aber der scheint hier wohl nicht gefragt zu sein.

Mannis Lösung scheint mir dann noch am besten.

(Nur einmal weil super billig production ^^)

...

Aber es geht ja grad um das Gegenteil dessen^^
(Außerdem ist der Code nicht gültig...)

[Lucleonhart]

Och mitakiiii...
Ob ich jetzt mache onclick = neuesbild eins
oder onclick: wenn bild = zwei dann neuesbild eins sonst neuesbild zwei.

Alles was ich sagen wollte: Die javascript aktualisierung funktioniert.
Und für ein einzelnes bild mit nem onclick befehl, bau ich auch keine validierte seite zusammen.

[mitaki]

oder onclick: wenn bild = zwei dann neuesbild eins sonst neuesbild zwei.

Alles was ich sagen wollte: Die javascript aktualisierung funktioniert.

...

Das Skript funktioniert. Nicht die Aktualisierung von Bild Eins. Das wird laut drunken monkey noch immer aus dem Cache geholt und das ist das Problem.

Und für ein einzelnes bild mit nem onclick befehl, bau ich auch keine validierte seite zusammen.

...

Warum du dir nicht einfach einmal eine baust und dann für alle Beispiele verwendest kannst du mir aber beantworten?

[drunken monkey]

OK, Mannis Methode funktioniert jetzt tatsächlich, auch wenn's halt schon etwas aufwändiger ist. ^^'

Vielen Dank nochmal an alle.

[DFYX]

Statt Zufallszahlen könntest du auch den aktuellen Timestamp anhängen, dann bist du auf der sicheren Seite.

[drunken monkey]

Statt Zufallszahlen könntest du auch den aktuellen Timestamp anhängen, dann bist du auf der sicheren Seite.

...

Ginge auch, stimmt, aber es geht ja ums Bilder-Aktualisieren und nicht um eine Herz-OP. o_O Wenn man da jedes 1000ste Mal halt zweimal klicken muss um einen Effekt zu erzielen, bzw. nur insgesamt 10000 Mal aktualisieren kann, wird man's denke ich überleben.
Es geht konkret um ein Captcha, und da wird, denke ich, doch bei den ersten zehn Varianten eine gut lesbare dabei sein.

Hier btw noch der Code, falls jemand in Zukunft mal das gleiche Problem haben sollte:

Code:

function reload_img (id)
{
    var img = document.getElementById (id);
    var source = img.src;
    var pos = source.lastIndexOf ("&foo=");
    var rand = Math.floor (Math.random () * 10000);
    if (pos > -1) {
        // Es wurde schon einmal "&foo=..." angehängt
        source = source.substring (0, pos);
        source += "&foo=" + rand;
    }
    else {
        // Es wird zum ersten Mal aktualisiert
        source += "&foo=" + rand;
    }
    img.src = source;
}

Aber das bringt mich auf eine Idee: könntet ihr bitte anfangen, hier sinnlos rumzuspammen, damit ich sowas sagen kann wie "So, ich mache hier mal zu!"? :3schau

*endlich seine supercoole Promotion ausprobieren will*

[mitaki]

Ach ja, für größtmögliche Zugänglichkeit würde ich eine zusätzliche PHP Variante einbauen. Z.B. neues Bild bei Seitenreload, oder ein Neu-Laden-Button.

Aber das bringt mich auf eine Idee: könntet ihr bitte anfangen, hier sinnlos rumzuspammen, damit ich sowas sagen kann wie "So, ich mache hier mal zu!"?

...

Das würde nur dazu führen, dass dir diese (meines Erachtens schlimmste aller) Promotionen entzogen wird.

Meines Wissens kannst du Themen auch schließen, ohne einen neuen Thread dazu zu posten. Davon abgesehen, muss man einen Grund zur Schließung angeben?

Gerade um zu sehen, wie das Feature ankommt hat man normal die freie Wahl