how to show preloading images before loading dynamic content

<script type="text/javascript">
function preloader(){
document.getElementById("preloader").style.display = "none";
document.getElementById("container").style.display = "block";
}
window.onload = preloader;
</script>

<style type="text/css">

div[id="container"]{
display: none;
}

div[id="preloader"]{
position: absolute;
z-index: 1000;
width: 100%;
height: 100%;
background: url(http://www.vinavu.com/wp-content/themes/comfy/styles/default/img/loading.gif) no-repeat 20px 20px;
cursor: wait;
}
</style>
<div id="preloader"></div>
<div id="container"></div>