javascript - 显示微调器，直到 iframe 加载了 http post 响应

Question

我有两个网站 A.com 和 B.com。我必须将 B.com 嵌入到 A.com 的 iframe 中。我无法在 B.com 进行任何更改

B.com 仅适用于带有一些发布数据的发布请求。我的工作如下

<!--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>

现在，B.com 可以完美地加载到 iframe 中以响应发布请求。但是 B.com 很慢。我想在 #frameDiv 内显示一个微调器，直到加载 iframe。我该怎么做？

这是我试过的:

$('#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
});

如果 B.Com 是一个简单的 get 并被设置为 iframe 的 src 属性，jQuery load 方法就可以做到这一点。但在这种情况下它不会。

感谢任何帮助:)

Answer 1

@charlietfl 的回答是正确的，而且有效。我只是想分享我发现的另一种方法。

只需将 iframe 的背景设置为微调框 :)

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

当 B.com 加载时，新文档会隐藏微调器..

知道哪种方法是首选吗？？