Bildaustausch mit verkleinerten Bilder (php/js)

[ingobar]

Hallo zusammen!

Folgendes Problem. Ich hole mir per JavaScript von einem Server ein sich ständig änderndes Bild, damit so etwas wie ein ruckelnder Film entsteht. Nicht die Variante, die ich gerne hätte, aber das kann ich nicht beeinflussen.

Folgenden Quelltext benutze ich dazu:

<script type="text/javascript">
var newImage = new Image();
newImage.src = "http://blabla.de/storch.jpg";

function updateImage(){
		if(newImage.complete) {
				document.getElementById("storch").src = newImage.src;
				newImage = new Image();
				newImage.src = "http://blabla.de/storch.jpg?rand=" + new Date().getTime();
		}
		setTimeout(updateImage, 1000);
}
updateImage();
</script>
<img id="storch" width="50%" height="50%" src="http://blabla.de/storch.jpg" />

Jetzt ist es nur so, dass bei Skalierung immer ein kurzes weißes Blitzen zwischen den Bilder zusätzlich zu sehen ist.

Wie könnte ich das anders machen, ohne das Blitzen? Ich denke, dass das Blitzen daher kommt, weil erst die src als großes Bild ausgetauscht wird und dann verkleinert wird. Ginge so etwas auch mit php?

Danke, Ingo

[JürgenB]

Hallo Ingo,

zu PHP kann ich nichts sagen.

Du könntest aber wechselweise das Bild bei einem unsichtbaren img austauschen und dann die Sichtbarkeit wechseln. Wenn du das über die Transparenz machst, bekommst du mit Transitions sogar sanfte Übergänge hin.

Gruß Jürgen

[BaBa]

Ich versteh nicht genau, warum du in JS ein Image() instantiierst. Einfach die src ändern müsste reichen. Auch sehe ich nicht, wo Du etwas skalierst. Die 50% in der Weitenangabe sollten jedenfalls nicht Dein Problem produzieren!

Ich würde es so machen: Zwei <img>-Elemente und die src cyclen. Zwei, da a) bei Verwendung eines neuen für jeden Ajaxrequest manchen Browsern ein Speicherproblem beschwert, und b) damit man eine schöne Transition implementieren kann.

Folgendes Problem. Ich hole mir per JavaScript von einem Server ein sich ständig änderndes Bild, damit so etwas wie ein ruckelnder Film entsteht.

Bitte beschreib mal genau deine Anwendung. Vielleicht kann man noch was Anderes vorschlagen.

Cheers, BaBa