I need to load and display an image (so far from folder) on a click of the button (without providing user with the opportunity to choose/change it).
The problem: although filename will stay the same, the image file itself might change after the page is loaded (it keeps being updated).
So pre-defining the source like this <img id = "bla" src="bla.png" align="right"> wouldn't work. What would be a normal way of loading an image in a sort of dynamic fashion from scratch when .html has loaded?
You can add timestamp to make a different GET request each time.
Try something like url + "?" + new Date()
you can implement an onclick handler to dynamically load and display the image once the button is clicked. that is in contrast to preload the image and not display it until the button is clicked (clicking the button unhide the image, while the image can be changed from the time it was read until the time it was displayed).
once the image is displayed, you can periodically reload (and display) the image, but this approach of polling is costly since operations is taking place when the image might not have been changed.
rather than using polling, you can reload (and display) the image on-demand when the server notifies the client that the image has been updated. you can achieve it using push api (but this is just an example)
style {
#imageToDisplay{
display:none;
}
.show{
display:block;
}
}
<div id="imageToDisplay">
<img id = "bla" src="/fromFolder/bla.png" align="right">
<button id="showImage">Click to Show</button>
</div>
<script>
$("body").on("click","#showImage", function(){
$("$imageToDisplay").toggleClass("show");
});
</script>
no-cacheheader, then resetting thesrcto the image's URL might do the trick.