Bild automatisch neu laden
theprogrammer12
- javascript
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?
Grüße,
.complete
oder versuch vllt den update rekursiv aus dem onload des bildes mit verzögerung?
bzw - das laden sollt egrundsätzlich nicht im "nagezeigten" stadtfinden, lager den lader aus
MFG
bleicher
hi,
const file = 'img.jpg';
'/img.jpg'
Warum die Pfadangabe wichtig ist:
http://rolfrost.de/pathpractice.html
Zum eigentlichen Thema, mein Vorschlag geht in Richtung URL-Scheme nach 2397.
http://rolfrost.de/cgi-bin/lavalampe.cgi
IE 8 kann mittlerweile auch base64 (wie alle anderen Browser), von daher steht dem nichts mehr im Wege.
Hotti
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,
Indem du den onload event verwendest.
function Refresh()
{
document.getElementById('image').onload = function() {
window.setTimeout("Refresh()", interval);
};
document.getElementById('image').src = file + "?v=" + Math.random();
}
Struppi.