Mostrar spinner till iframe se carga con una respuesta http post

Question

Tengo dos sitios web A.com y B.com. Tengo que incrustar B.com en un iframe en A.com. No puedo hacer ningún cambio en B.com

B.com solo funciona con las solicitudes de publicación con algunos datos de la publicación. Tengo este trabajo de la siguiente manera

<!--This is the div inside which I will embedd the iframe--> 
<div id="frameDiv"></div> 

<script type="text/javascript"> 

    //Create iframe 
    var $ifr = $('<iframe name="myFrame" id="myFrame"></iframe>'); 

    //create form 
    var $form = $('<form action="B.com" method="post" target="myFrame"></form>'); 

    //Append hidden field to form to pass postData 
    $form.append($('<input type="hidden" name="dataName"><input>').val('data')); 

    //Append form to the iframe and then append iframe to the div  
    $('#frameDiv').append($ifr.append($form)); 

    $form.submit(); 
</script> 

Ahora, cargas B.com perfectamente dentro del marco flotante con la respuesta a la solicitud POST. Pero B.com es lento. Quiero mostrar un spinner dentro de #frameDiv hasta que cargue el iframe. ¿Cómo puedo hacer esto?

Esto es lo que he intentado:

$('#frameDiv').append($spinnerImage) 

//Does not work, fires immediately 
$ifr.load(function(){ 
    //Hide the spinner image 
}); 

//Does not work, fires immediately 
$ifr.ready(function(){ 
    //Hide the spinner image 
}); 

Si B.Com era un encuentro sencillo y se estableció como el atributo src del iframe, método de carga jQuery hace el truco. Pero en este caso no es así.

Cualquier ayuda se agradece :)

Answer 1

Usted puede intentar unirse a un nuevo detector de eventos de carga del controlador de eventos de carga inicial del marco flotante. Los siguientes trabajos sobre iFrame mismo dominio:

$ifr.load(function(){ 
    /* bind new load event listener for next load*/ 
    $(this).load(function(){ 
     /* hide spinner*/ 
    }) 
}); 

Answer 2

@ respuesta de charlietfl es correcta y funciona. Solo quería compartir este otro método, descubrí que también funciona.

acaba de establecer el fondo del marco flotante a la ruleta :)

#myFrame 
{ 
    background-image: url('/content/images/spinner.gif'); 
    background-repeat: no-repeat; 
} 

Cuando las cargas B.com, el nuevo documento oculta la ruleta ..

Alguna idea de qué método se prefiere ??