Mostrar una imagen o un mensaje mientras carga un iFrame

MostrarImagenEsperaIframe.html

<!-- JavaScript -->
<script type="text/javascript">
// <![CDATA[
 function preloader(){
    document.getElementById("preload").style.display = "none";
    document.getElementById("iframe").style.display = "block";
 }
 //preloader
 window.onload = preloader;
// ]]>
</script>

<!-- Estilo -->
<style>
  div#iframe {
    display: none;
  }
  div#preload {
    top: 200 px;
    margin: auto;
    position: inherit;
    z-index: 1000;
    width: 500px;
    height: 300px;
    background: url('http://terciar.info/wp-content/uploads/2015/11/cargando1.gif') no-repeat;
    cursor: wait;
  }
</style>

<!-- Vista -->
<h3 style="text-align: center;">Comunicaciones Internas.</h3>
<div id="preload"><img src="http://terciar.info/wp-content/uploads/2015/08/terlogo1101.png" alt="Terciar"></div>
<div id="iframe"><iframe id="app-iframe" onload="displayTest();" src="http://terciar-novedades.herokuapp.com/pages/index"  width="100%" height="800" frameborder="0">Si ves este mensaje, significa que tu navegador no tiene soporte para marcos o el mismo está deshabilitado. Puedes acceder a la información mostrada en este marco aquí: <a href="http://terciar-inscripciones.herokuapp.com/registrations/new">Ver novedades</a>.</iframe>
</div>