best way to get an image to load after page loads using javascript.

Question

Hello,
I wanted to see if anyone has an opinion on the best way to get an image to load after page loads using javascript. My code seems to work but the image loads fast so I can not tell how long the delay is between when the page finishes loading and the image populates. Is there a way to make the image not show for say 10 seconds?
Here is my code
HTML
<img id= "imgload" src="bowpic.jpg" alt="Bowpic"/>

CSS
#imgload {
width:auto;
height:400px;
float: left;
margin: 20px 20px 0 0
}

JavaScript: I am placing my script tag right before the </body>. Should I place it somewhere else?

<script>
window.onload=function () {
document.getElementById("imgload").style.visibility = "visible";
}
</script>

Answer 1

you can use a setTimeout() function to set the image visible after a setamount of milliseconds
https://www.w3schools.com/jsref/met_win_settimeout.asp