javascript - 在特定html表单的中心显示加载图像？

Question

我有具有 id 属性的图像标签。我想在特定 html 表单的中心显示这个加载图像（我有那个 html 表单的 id）。我正在使用 jquery。我不知道该怎么做？

 <img id="loading" src="loading.gif" />

这样做的原因我可以在一个页面内有多个表单。我想在特定表单边界的中心显示图像而不是完整的页面边界

Answer 1

你可以使用这样的东西......

$('#form-id').submit(
  function(e) {
    $(this).children().hide();
    $(this).append('<img id="loading" src="loading.gif" />');
  }
);

Answer 2

随着 CSS 的到来，我们来到了这个非常基本的结构（将这个 HTML 放在一个表单中，并将 CSS 添加到样式覆盖）

<div class="loader">
    <img src="http://cdn1.iconfinder.com/data/icons/duesseldorf/32/process.png">
</div>

http://jsfiddle.net/aG3DP/

Answer 3

您可能应该将表单包装在 DIV 中，然后只需放置img带边距，使其显示在 DIV 的中心（包含您的表单）

img#loading {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

您可能希望默认使用 javascript 或其他方式隐藏它。

编辑：关于表单中的现有内容，我会用position:absolute;.

Answer 4

你需要这些 jQuery 方法：

• offset()
• width()
• height()

一些数学运算，您可以轻松地将元素放在表单上。请注意，表单的默认宽度为 100%。

检查我的解决方案：http: //jsfiddle.net/3pbkV/

Answer 5

如果您使用position:absolute;将加载器定位在表单的中心，请记住position: relative;在表单上使用，因为绝对定位的元素是相对于它们的第一个定位的父元素定位的。

示例：HTML：

<form id="myform">
    <div class="loader"><img src="loading.gif"></div>
</form>

CSS：

form#myform {
    position: relative;
}
div.loader {
   width: 60px;
   height: 60px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-top: -30px;
   margin-left: -30px;
   display: none;
}

jQuery：

$(function() {
   $('form#myform').submit(function() {
      $(this).find('.loader').show();
   });
});