如果没有触发表单提交的动画

Question

我有一个网页，有一个动画时，Iframe正在加载。页面上有一个表单供用户提交一个url，表单的目标是iframe。

加载动画在页面第一次加载时工作。但是当表单提交时，动画就不能工作了。我不知道我做错了什么，但这是我的代码，如果有人可以帮助，谢谢提前。

<head>
<style>
#frameWrap {
    position:relative;
    height: 360px;
    width: 640px;
    border: 1px solid #777777;
    background:#f0f0f0;
    box-shadow:0px 0px 10px #777777;
}

#iframe1 {
    height: 360px;
    width: 640px;
    margin:0;
    padding:0;
    border:0;
}

#loader1 {
    position:absolute;
    left:40%;
    top:35%;
    border-radius:20px;
    padding:25px;
    border:1px solid #777777;
    background:#ffffff;
    box-shadow:0px 0px 10px #777777;
}
</style>

<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
    <div id="form_container">
        <form id="tt1"  method="post" target="iframe1" action="convert.php">
            <input id="element_1" name="url1"  type="text"  value="http://"/> 
            <input id="saveForm" type="submit" name="submit" value="submit" />


       </form>  

<div id="frameWrap">
<img id="loader1" src="ajax_loader.gif" width="36" height="36" alt="loading gif"/>
<iframe id="iframe1" src="image.html" ></iframe>
</div>
<script>
    $(document).ready(function () {
        $('#iframe1').on('load', function () {
            $('#loader1').hide();
        });
    });
</script>

</body>

Answer 1

当您提交表单时，页面“控件”就会被传输到新的URL --在您的情况下，转移到convert.php。如果上传需要时间，那么页面就会看起来什么也不做。您想要的是在其中使用form.onSubmit和$('#loader1').show()，返回true。

// in ready()
$('#tt1').submit(function(){$('#loader1').show();return true;});