<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="load" class="load">
<h3 >{{load}}</h3>
<img src="{{ load }}" id="image" style="height:500px;width:500px;" />
</div>
<script type="text/javascript">
document.getElementById("image").addEventListener("loadstart", refresh);
function refresh() {
window.location.reload();
}
</script>
</body>
</html>
Flask server is running on http://0.0.0.0:5000/, after every HTTP POST new image is loaded to src="{{ load }}". I'd like website to refresh by itself using function refresh, but it is not working. Does anyone has idea why?
The image is already loaded when your script runs
Also images do not have a loadStart
Use the window load instead
and give the user a chance to enjoy the image
window.addEventListener("load", function() {
setTimeout(function() {
window.location.reload(1);
},3000)
})
<div id="load" class="load">
<h3>{{load}}</h3>
<img src="{{ load }}" id="image" style="height:500px;width:500px;" />
</div>
You can also just load the image
window.addEventListener("load", function() {
setTimeout(function() {
document.getElementById('image').src = '{{ load }}'; // you may want to add something random to not cache
},3000)
})
<div id="load" class="load">
<h3>{{load}}</h3>
<img src="{{ load }}" id="image" style="height:500px;width:500px;" />
</div>