theprogrammer12: Bild automatisch neu laden

Beitrag lesen

Hi!
Ich habe mit C++ ein Programm geschrieben, dass Bilder aus einer Webcam ausliest und sie anschließend in eine Datei schreibt. Diese Datei wird von einem Apache Server veröffentlicht und soll dann wie ein Stream im Browser angezeigt werden.
Dazu will ich ein Script schreiben, das automatisch die Datei neu lädt.
Folgendes habe ich bis jetzt geschrieben:

<html>  
<head>  
	<title>Stream</title>  
	<script type="text/javascript">  
		const file = 'img.jpg';  
		var interval = 100;  
		  
		function Refresh()  
		{  
			document.getElementById('image').src = file + "?v=" + Math.random();  
			window.setTimeout("Refresh()", interval);  
		}  
			  
		window.setTimeout("Refresh()", interval);  
	</script>  
</head>  
<body>  
Reload Interval: <input id="interval" value="100"><button onclick="interval = document.getElementById('interval').value;")>Apply</button><br>  
<img id="image">  
</body>  
</html>  

Ok. Funktioniert auch schön, aber das Problem ist, dass das Intervall oft kleiner ist als die Ladezeit und daher wird, schon bevor der letzte Frame geladen wurde, das nächte Bild geladen, was zur Folge hat, dass das Bild stehen bleibt. Wie kann ich überprüfen, ob das Bild schon geladen ist, oder gibt es evtl. noch eine bessere Lösung als das mit den zufälligen GET-Werten?