<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Load image</title>
<style>
#tdimg1 {
background-color:#F9F9F9;
width:200px;height:200px;
text-align:center;
}
#img1 {
width:200px; height:200px;
opacity:0;
transition:opacity 3s ease;
}
</style>
</head>
<body>
<table align="center">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>aaa</td>
<td id="tdimg1"><img id="img1"
src="data:image/bmp;base64,Qk1GAAAAAAAAADYAAAAoAAAAAgAAAAIAAAABABgAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAA////////AAD///////8AAA==" alt="Image" ></td>
<td>bb</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script>
function Loading()
{
el = document.getElementById("img1");
el.src = "survey.jpg"; // load the image
el.style.opacity = "1.0"; // show it slowly
}
setTimeout(Loading, 1000); // load images after 1 second
</script>
</body>
</html>